Красивое оформление таблиц
Стили браузера по умолчанию отображают таблицу и ее ячейки без видимых границ и фона, при этом ячейки внутри таблицы не прилегают вплотную друг к другу. С помощью CSS-стилей можно красиво оформить таблицу в соответствии с ее содержимым.
Перейти на страницу с примерами
1. Таблица с раздельными строками
Таблицы с промежутками между строк помогают сконцентрироваться на связанной информации, расположенной в этой же строке таблицы, но в соседних ячейках. Для того, чтобы отделить текст от картинки, помещаем его в другую ячейку, объединив при этом две ячейки в заголовке таблицы (<th colspan="2">Модель</th>), а правую границу между ячейками убираем.
<table> <tr> <th colspan="2">Модель</th> <th>Цена</th> <th>Количество</th> <th>Итого</th> </tr> <tr> <td><img src="https://html5book.ru/wp-content/uploads/2015/04/dress-2.png"></td> <td>Платье с цветочным принтом</td> <td>2500</td> <td>1</td> <td>2500</td> </tr> <tr> <td><img src="https://html5book.ru/wp-content/uploads/2015/04/dress-3.png"></td> <td>Платье с боковыми вставками</td> <td>3000</td> <td>1</td> <td>3000</td> </tr> </table>
table {
border-spacing: 0 10px;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
}
th {
padding: 10px 20px;
background: #56433D;
color: #F9C941;
border-right: 2px solid;
font-size: 0.9em;
}
th:first-child {
text-align: left;
}
th:last-child {
border-right: none;
}
td {
vertical-align: middle;
padding: 10px;
font-size: 14px;
text-align: center;
border-top: 2px solid #56433D;
border-bottom: 2px solid #56433D;
border-right: 2px solid #56433D;
}
td:first-child {
border-left: 2px solid #56433D;
border-right: none;
}
td:nth-child(2){
text-align: left;
} 2. Цветная таблица
Используя такой прием, можно эффектно оформить таблицу при помощи контрастных цветов, которые гармонично впишутся в цветовую гамму вашего сайта.
<table> <tr> <th>Company</th> <th>Q1</th> <th>Q2</th> <th>Q3</th> <th>Q4</th> </tr> <tr> <td>Microsoft</td> <td>20.3</td> <td>30.5</td> <td>23.5</td> <td>40.3</td> </tr> <tr> <td>Google</td> <td>50.2</td> <td>40.63</td> <td>45.23</td> <td>39.3</td> </tr> <tr> <td>Apple</td> <td>25.4</td> <td>30.2</td> <td>33.3</td> <td>36.7</td> </tr> <tr> <td>IBM</td> <td>20.4</td> <td>15.6</td> <td>22.3</td> <td>29.3</td> </tr> </table>
table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14px;
border-collapse: collapse;
text-align: center;
}
th, td:first-child {
background: #AFCDE7;
color: white;
padding: 10px 20px;
}
th, td {
border-style: solid;
border-width: 0 1px 1px 0;
border-color: white;
}
td {
background: #D8E6F3;
}
th:first-child, td:first-child {
text-align: left;
} 3. Таблица с закругленными углами
Благодаря добавлению в спецификацию CSS3 свойства border-radius, появилась возможность закругления углов таблицы без использования фоновых изображений. Чтобы добиться такого эффекта, нужно закруглить углы соответствующих ячеек.
Разметка HTML аналогично с примером 2.
table { font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 14px; border-radius: 10px; border-spacing: 0; text-align: center; } th { background: #BCEBDD; color: white; text-shadow: 0 1px 1px #2D2020; padding: 10px 20px; } th, td { border-style: solid; border-width: 0 1px 1px 0; border-color: white; } th:first-child, td:first-child { text-align: left; } th:first-child { border-top-left-radius: 10px; } th:last-child { border-top-right-radius: 10px; border-right: none; } td { padding: 10px 20px; background: #F8E391; } tr:last-child td:first-child { border-radius: 0 0 0 10px; } tr:last-child td:last-child { border-radius: 0 0 10px 0; } tr td:last-child { border-right: none; }
4. Таблица с раздельными ячейками
Разметка HTML аналогично с примером 2.
table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
text-align: left;
border-collapse: separate;
border-spacing: 5px;
background: #ECE9E0;
color: #656665;
border: 16px solid #ECE9E0;
border-radius: 20px;
}
th {
font-Таблицы в HTML | HTML/xHTML
| Company | Contact | Country |
| Alfreds Futterkiste | Maria Anders | Germany |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
Посмотреть пример
Таблица определяется с помощью тега <table>. Каждая строка таблицы определяется с помощью HTML tr. Заголовок таблицы определяется с помощью тега <th>. По умолчанию заголовки выделяются жирным шрифтом и выравниваются по центру. Ячейка таблица определяется с помощью тега <td>.
Пример:
<table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>
Посмотреть пример
Примечание: Элементы <td> являются контейнерами данных таблицы. Они могут содержать HTML-элементы, текст, изображения, списки, другие таблицы и т.д.
Рамка задается с помощью свойства CSS border:
Пример:
table, th, td {
border: 1px solid black;
}Посмотреть пример
Не забудьте задать рамку и для самой таблицы, и для ячеек.
Если хотите объединить рамки всех HTML table tr в одну, используйте свойство CSS border-collapse:
Пример:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}Посмотреть пример
Поля ячейки задают пространство между содержимым ячейки и ее рамкой. Чтобы установить поля, используйте свойство padding:
Пример:
th, td {
padding: 15px;
}Посмотреть пример
По умолчанию заголовки табл
HTML5 | Таблицы
Таблицы
Последнее обновление: 08.04.2016
Для создания таблиц в html используется элемент table. Каждая таблица между тегами <table> и
</table> содержит строки, который представлены элементом tr. А каждая строка между тегами <tr> и
</tr> содержит ячейки в виде элементов td.
Создадим простейшую таблицу:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Таблицы в HTML5</title> </head> <body> <table> <tr> <td>Модель</td> <td>Компания</td> <td>Цена</td> </tr> <tr> <td>Nexus 6P</td> <td>Huawei</td> <td>49000</td> </tr> <tr> <td>iPhone 6S PLus</td> <td>Apple</td> <td>62000</td> </tr> <tr> <td>Lumia 950 XL</td> <td>Microsoft</td> <td>35000</td> </tr> </table> </body> </html>
Здесь у нас в таблице 4 строки, и каждая строка имеет по три столбца.
При этом в данном случае первая строка выполняет роль заголовка, а остальные три строки собственно являются содержимым таблицы. Разделения заголовков, футера и тела таблицы в html предусмотрены соответственно элементы thead, tfoot и tbody. Для их применения изменим таблицу следующим образом:
<table> <caption><b>Популярные смартфоны 2015</b></caption> <thead> <tr> <th>Модель</th> <th>Компания</th> <th>Цена</th> </tr> </thead> <tbody> <tr> <td>Nexus 6P</td> <td>Huawei</td> <td>49000</td> </tr> <tr> <td>iPhone 6S PLus</td> <td>Apple</td> <td>62000</td> </tr> <tr> <td>Lumia 950 XL</td> <td>Microsoft</td> <td>35000</td> </tr> <tbody> <tfoot> <tr> <th colspan="3">Информация по состоянию на 17 марта</th> </tr> </tfoot> </table>
В элемент thead заключается строка заголовков. Для ячеек заголовок используется не элемент td, а th. Элемент
th выделяет заголовок жирным. А все остальные строки заключаются в tbody
Элемент tfoot определяет подвал таблицы или футер. Здесь обычно выводится некоторая вспомогательная информация по отношению к таблице.
Кроме собственно заголовоков столбцов с помощью элемента caption мы можем задать общий заголовок для таблицы.
Также стоит отметить, что футер таблицы содержит только один столбец, который раздвигается по ширине трех столбцов с помощью атрибута colspan="3"
Атрибут colspan указывает на какое количество столбцов раздвигается данная ячейка. Также с помощью атрибута rowspan мы можем раздвигать ячейку на определенное количество строк. Например:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Таблицы в HTML5</title>
<style>
td{
width: 60px;
height:60px;
border: solid 1px silver;
text-align:center;
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td colspan="2">7</td>
</tr>
</table>
</body>
</html>
Урок 10: Таблицыrustutorial — HTML.net
Таблицы используются, когда вам необходимо показать «табличные данные», например, информацию, логически упорядоченную в столбцы и ряды.
Это трудно?
Построение таблиц в HTML может показаться сложным на первый взгляд, но, если вы не будете дёргаться, это окажется строго логичным — как и всё в HTML.
Пример 1:
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
будет выглядеть в браузере:
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |
Какая разница между <tr> и <td>?
Как видно из приведённого примера, это, возможно, самый сложный из примеров HTML, которые мы вам давали до сих пор. Давайте здесь остановимся и сделаем пояснения:
Для вставки таблиц используются 3 базовых тэга:
<table>— начало и конец таблицы. Логично.<tr>— «table row/ряд таблицы», начинает и заканчивает горизонтальный ряд ячеек. Тоже логично.<td>— сокращение от «table data/табличные данные». Этот тэг начинает и заканчивает каждую ячейку ряда таблицы. Всё просто и логично.
Вот что происходит в Примере 1: таблица начинается с <table>,
затем идёт <tr>, указывающий на начало нового ряда. В ряду
вставлены две ячейки: <td>Cell 1</td> и <td>Cell 2</td>. Ряд закрывается </tr>,
и сразу начинается новый ряд <tr>. В новом ряду также две
ячейки. Таблица закрывается </table>.
Чтобы было ещё понятнее: ряды это горизонтальные строки ячеек, а столбцы — вертикальные столбцы ячеек:
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |
Cell 1 и Cell 2 образуют ряд. Cell 1 и Cell 3 образуют столбец.
В вышеприведённом примере в таблице имеются два ряда и два столбца. Но в таблице может быть неограниченное число рядов и столбцов.
Пример 2:
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
<td>Cell 8</td>
</tr>
<tr>
<td>Cell 9</td>
<td>Cell 10</td>
<td>Cell 11</td>
<td>Cell 12</td>
</tr>
</table>
будет выглядеть в браузере:
| Cell 1 | Cell 2 | Cell 3 | Cell 4 |
| Cell 5 | Cell 6 | Cell 7 | Cell 8 |
| Cell 9 | Cell 10 | Cell 11 | Cell 12 |
Есть ещё какие-нибудь атрибуты?
Разумеется. Например, атрибут border используется для специфицирования толщины рамки вокруг таблицы:
Пример 3:
<table border="1">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
будет выглядеть в браузере:
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |
Толщина рамки специфицируется в пикселах (См. Урок 9)
Как и с изображениями, вы можете указывать размер таблицы в пикселах или в процентах от размера экрана:
Пример 4:
<table border="1">
Этот пример будет отображён в браузере как таблица шириной в 30% экрана. Проверьте сами.
Ещё атрибуты?
У таблиц есть много атрибутов. Вот ещё два:
- align: специфицирует выравнивание содержимого всей таблицы по горизонтали, в ряду или в отдельной ячейке. Например, left, center или right.
- valign: специфицирует выравнивание по вертикали в ячейке. Например, top, middle или bottom.
Пример 5:
<td align="right" valign="top">Cell 1</td>
Что можно вставлять в таблицы?
Теоретически — всё: текст, ссылки и изображения… НО таблицы предназначаются для вывода табличных данных (т. е. данных, которые изначально представляются в виде столбцов и рядов), поэтому избегайте вставки данных в таблицы только потому, что вы хотите разместить их рядом друг с другом.
В добрые старые времена Internet — т. е. несколько лет назад — таблицы часто использовались для распределения содержимого на странице. Однако сегодня для этого есть более крутой способ — CSS. Но об этом позже.
Теперь примените ваши знания на практике и создайте несколько таблиц различных размеров, с разными атрибутами и содержимым. Это займёт у вас несколько часов.
<< Урок 9: Изображения
Урок 11: Ещё о таблицах >>
HTML таблица, заголовок таблицы, ширина ячейки
HTML ширина ячейки таблицы и ее высота (размер ячеек)
HTML высота ячеек и их ширина, размер определяется следующими атрибутами:
|
<html> |
Результат:
|
ячейка 1, первый ряд |
ячейка 2, первый ряд |
|
ячейка 1, второй ряд |
ячейка 2, второй ряд |
Были установлены размеры первой ячейки из первого ряда. В итоге вторая ячейка, этого же ряда унаследовала высоту первой, а первая ячейка, второгo ряда — ее ширину (ширину первой ячейки, первого ряда). Такова особенность взаимодействия элементов HTML таблицы.
Горизонтальное HTML выравнивание в таблице и в ячейке, текст
HTML выравнивание внутри таблицы. Текст слева, справа, по центру ячеек таблицы:
|
<html> |
Результат:
|
ячейка 1 |
ячейка 2 |
ячейка 3 |
Вертикальное выравнивание текста внутри HTML таблицы
HTML выравнивание в таблице. Текст вверху, внизу, по центру ячеек таблицы:
|
<html> |
Результат:
|
ячейка 1 |
ячейка 2 |
ячейка 3 |
Атрибут valign определяет вертикальное выравнивание текста внутри таблицы.
Теги, определяющие заголовок HTML таблицы
HTML заголовки таблицы:
|
<html> |
Результат:
|
Заголовок |
Заголовок |
Заголовок |
|
Текст |
Текст |
Текст |
|
Текст |
Текст |
Текст |
Теги <th> </th> определяют заголовок HTML таблицы.
HTML таблица по центру, с левой, с правой стороны
Горизонтальное расположение HTML таблицы внутри web-страницы:
|
<html> |
Результат: HTML таблица по центру страницы, слева, справа
В примере выше показаны три отдельные таблицы, каждая из которых состоит из одной ячейки.bgcolor – HTML атрибут – определяет цвет фона. В предыдущем уроке мы использовали его CSSаналог – background-color.
HTML таблица расположена внутри ячейки
Пример:
|
<html> |
Результат: HTML таблица внутри ячейки другой таблицы
Внутри второй ячейки находится еще одна таблица со своими атрибутами, значениями и стилями.
Размеры и фон внутренней таблицы, в отличае от внешней, заданы с помошью CSS.
Добавить комментарий
Тег таблицы HTML
Пример
Простая таблица HTML, содержащая два столбца и две строки:
<таблица>
г.
Попробуй сам »
Дополнительные примеры «Попробуйте сами» ниже.
Определение и использование
Тег Таблица HTML состоит из одного элемента Элемент Таблица HTML может также включать Тег Тег Как добавить свернутые границы в таблицу (с помощью CSS): <таблица> определяет таблицу HTML.
и одного или нескольких элементов
,
Элементы и . определяет строку таблицы, элемент и. определяет заголовок таблицы, а
Элемент определяет ячейку таблицы. Поддержка браузера
Элемент <таблица> Есть Есть Есть Есть Есть Глобальные атрибуты
также поддерживает глобальные атрибуты в HTML.
Атрибуты событий
также поддерживает атрибуты событий в HTML.
Другие примеры
Пример
table, th, td {
border: 1px сплошной
черный;
граница-коллапс: коллапс;
}
Месяц Экономия январь 100 февраль 80 долларов