- Вёрстка таблиц в HTML
- Обучающее видео HTML. Часть 8. Таблицы
- Зачем нужны таблицы в HTML?
- Теги HTML
<table>,<tr>,<th>,<td> - Пример использования тегов
<table>,<tr>,<td> - Теги
<th>и<caption> - Пример использования тегов
<th>и<caption> - Горизонтальное слияние ячеек
colspan - Пример горизонтального слияния ячеек
colspan - Вертикальное слияние ячеек
rowspan - Пример вертикального слияния ячеек
rowspan - Задание для самостоятельной работы
Вёрстка таблиц в HTML
В этом видео рассказывается про вёрстку таблиц в HTML: какие теги необходимо использовать для добавления таблицы в HTML-документ, какие атрибуты служат для горизонтального и вертикального объединения ячеек таблиц, как верстать сложные таблицы с объединёнными ячейками.
Обучающее видео HTML. Часть 8. Таблицы
Зачем нужны таблицы?
Первым делом о хорош. Поэтому сперва следует отметить, что с помощью таблиц делать не надо.
Не надо верстать сайты в виде таблицы! Вёрстка сайтов в виде таблицы – это прошлый век.
Сейчас сайты верстают с помощью CSS, но о CSS будет отдельный рассказ.
Таблицы в HTML нужно верстать тогда, когда требуется сверстать таблицу!
Таблицы достаточно часто встречаются в нашей жизни, например, таблица Пифагора, таблица Менделеева, таблица соответствия размеров обуви или блузок и тому подобное. Есть масса информации, которую удобно представлять в виде таблиц.
Поэтому таблицы в HTML используются для вёрстки таблиц. Всё остальное верстается с помощью более приспособленных для этого механизмов отображения информации.
Важно!
все теги при работе с таблицами парные. Поэтому помним, что все теги состоят из пары «открывающий тег» - «закрывающий тег». С таблицами это наиболее актуально. Поэтому закрываем все теги, иначе таблица поплывёт, т.к. вёрстка будет нарушена!
Теги <table>, <tr>, <th>, <td>
- Для добавления таблицы в HTML-документ служит тег
<table>. - Для того чтобы добавить строчку в таблицу, нужно воспользоваться тегом
<tr>. - Для разбивки строки на ячейки служат теги
<th>и<td>.
Каркас конструкции таблицы именно так и создаётся: в контейнер <table> вкладываются контейнеры строк <tr>, а в строчные контейнеры вкладываются контейнеры ячеек <th> и <td>.
Контейнеры ячеек, по сути, определяют количество столбцов в таблице.
Например:
<table>
<tr>
<th>ячейка 1 в строке 1</th>
<td>ячейка 2 в строке 1</td>
</tr>
</table>Важно!
- Теги
<table>,<tr>,<th>,<td>двойные и требуют закрывающих тегов</table>,</tr>,</th>,</td>. - Количество ячеек в каждой строчке таблицы всегда постоянно. Т.е., если мы начали верстать таблицу с 10-ю столбцами, их в этой таблице во всех строчках должно быть 10!
Пример использования тегов <table>, <tr>, <td>
Для того, чтобы показать как верстать таблицу необходимо упомянуть про атрибут border тега <table>, который служит для задания ширины границы ячеек таблицы. По умолчанию border равен нулю. Поэтому, если его не задать, то границ ячеек не будет видно. Во всех примерах этого видео border прописан равным единице.
В примере ниже показано как сверстать таблицу 2 на 2:
<html>
<head>
<title>Таблица из 2x2</title>
</head>
<body>
<h1>Таблица из 2x2</h1>
<table border="1">
<tr>
<td>1-я строка,<br>1 ячейка</td>
<td>1-я строка,<br>2 ячейка</td>
</tr>
<tr>
<td>2-я строка,<br>1 ячейка</td>
<td>2-я строка,<br>2 ячейка</td>
</tr>
</table>
</body>
</html>
При просмотре в браузере этот код будет выглядеть так:
Таблица из 2x2
|
Теги <th> и <caption>
Для того, чтобы задать название таблицы, в тег <table> можно вложить тег <caption>, в котором указать название таблицы. Это достаточно удобно, т.к. название таблицы выводится по центру таблицы.
В таблицах бывает нужно выделить верхнюю строчку или левый столбец. В них обычно лежат обозначения значений того, что за данные отображены в таблице. Чтобы выделить соответствующие ячейки вместо тега <td> нужно использовать тег <th>. Тогда то, что находится в этих ячейках, будет расположено по центру ячеек и выделено жирным шрифтом (что обычно и требуется).
Важно!
Теги <th>, <caption> двойные и требуют закрывающих тегов </th>, </caption>
Например:
<table>
<caption>Заголовок таблицы</caption>
<tr>
<th>1-я ячейка (жирная и по центру)</th>
<th>2-я ячейка (жирная и по центру)</th>
</tr>
</table>
Пример использования тегов <th> и <caption>
Рассмотрим использование тегов <th> и <caption> на следующем примере:
<html>
<head>
<title>Таблица из 2x2</title>
</head>
<body>
<h1>Таблица с заголовком</h1>
<table border="1">
<caption>Заголовок</caption>
<tr>
<th>1 cтрока,<br>th-ячейка</th>
<th>1 строка,<br>th-ячейка</th>
</tr>
<tr>
<td>2 строка, td-ячейка</td>
<td>2 строка, td-ячейка</td>
</tr>
</table>
</body>
</html>При просмотре в браузере этот код будет выглядеть так:
Таблица с заголовком
|
На этом примере хорошо видно разницу между ячейками, заданными тегами <th> и <td>.
Так как в таблице задан тег <caption>, то при отображении таблицы отображается и её заголовок.
На этом знакомство с тегами разметки таблицы пока завершим и дальше рассмотрим, как верстать сложные таблицы (у которых количество отображаемых столбцов различаются).
Горизонтальное слияние ячеек colspan
Для того, чтобы объединить несколько ячеек в одной строке используется атрибут colspan для соответствующей ячейки. Слияние происходит вправо на число ячеек, указанное в атрибуте.
ВАЖНО!
Те ячейки, которые ушли на слияние в одну ячейку не прописываются в HTML-документ. Т.е., если мы сливаем 3 ячейки, то в этой строчке будет на 2 ячейки меньше. А мы помним, что количество ячеек определяет количество столбцов в HTML-таблице и это должно быть число постоянное для всех строк в таблице.
Например:
<table>
<tr>
<th colspan="3">colspan 3-х ячеек</th>
</tr>
<tr>
<td>1-я ячейка, 2-я строчка</td>
<td>2-я ячейка, 2-я строчка</td>
<td>3-я ячейка, 2-я строчка</td>
</tr>
</table>Пример горизонтального слияния ячеек colspan
Рассмотрим использование горизонтального слияния ячеек colspan на следующем примере:
<html>
<head>
<title>colspan</title>
</head>
<body>
<h1>Горизонтальное слияние</h1>
<table border="1">
<tr>
<th colspan="3">3 ячейки</th>
</tr>
<tr>
<td>1 ячейка,<br>2 строчка</td>
<td>2 ячейка,<br>2 строчка</td>
<td>3 ячейка,<br>2 строчка</td>
</tr>
</table>
</body>
</html>При просмотре в браузере этот код будет выглядеть так:
Горизонтальное слияние
|
||||||
На примере мы видим, что если мы слили 3 ячейки в одну, а в таблице всего 3 столбца, то в первой строчке останется только одна ячейка с атрибутом colspan="3".
Во второй же строчке таблицы останутся все 3 ячейки.
Про это важно помнить при вёрстке сложных таблиц.
Вертикальное слияние ячеек rowspan
Механизм вертикального слияния ячеек похож на механизм горизонтального слияния. Разница только в том, что сливаются ячейки, находящиеся ниже той, в которой указан атрибут rowspan. Слияние ячеек происходит вниз на количество N, указанное в атрибуте.
ВАЖНО!
Те ячейки, которые ушли на слияние не прописываются, а пропускаются в следующей строчке. Т.е. строчка с атрибутом rowspan и все следующие за ней N-1 строчек должны содержать на одну ячейку меньше.
Например:
<table>
<tr>
<td>1-я ячейка, 1-я строчка</td>
<th rowspan="2">rowspan 2-х ячеек</th>
</tr>
<tr>
<td>1-я ячейка, 2-я строчка</td>
<!-- тут нет ячейки, она слилась -->
</tr>
</table>Пример вертикального слияния ячеек rowspan
Рассмотрим использование вертикального слияния ячеек rowspan на следующем примере:
<html>
<head>
<title>rowspan</title>
</head>
<body>
<h1>Вертикальное слияние</h1>
<table border="1">
<tr>
<td>1 ячейка,<br>1 строчка</td>
<th rowspan="2">2 ячейки</th>
</tr>
<tr>
<td>1 ячейка,<br>2 строчка</td>
<!-- нет ячейки - rowspan -->
</tr>
</table>
</body>
</html>При просмотре в браузере этот код будет выглядеть так:
Вертикальное слияние
|
В примере, приведённом на слайде мы видим, как выглядит таблица 2x2, если объединить последний столбец.
В HTML-коде видно, что во второй строчке нет ячейки, которая ушла на объединение с ячейкой, находящейся строчкой выше.
Три вёрстке сложных таблиц, важно понимать, какие ячейки ушли на вертикальное объединение, пропускать их и верстать сразу следующими за ними ячейки.
Задание для самостоятельной работы
В качестве задания к этому видео, рекомендуется сделать те простые примеры, которые показаны в данном уроке.
А лучше придумать достаточно большую и сложную таблицу, например 10 на 10, нарисовать её на бумаге, стереть часть вертикальных и горизонтальных линий, объединив ячейки. И потом сверстать её в HTML-код.
Сейчас есть масса инструментов, которые позволяют верстать таблицы в интерактивном режиме, но знание о том, как верстаются таблицы, может очень пригодиться, если что-то пойдёт не так и потребуется исправлять таблицу «ручками».
Сведений из данного видео о табличной вёрстке в HTML должно быть достаточно на первое время.
Если что-то не получается, то по этой ссылке можно скачать примеры из видео. И конечно всегда можете задавать свои вопросы.
