Знакомимся с html таблицами.

Количество просмотров: 251

Данные представленные в виде таблиц встречаются в интернете крайне часто, сложно представить какой нибудь сайт и чтобы на нем ни разу не использовалась таблица. Для новичков желающих мастерами в верстке придется встретиться с ними и обуздать. Однако для начала мы начнем с самого простого, скопируйте ниже приведенный код к себе в html документ, сохраните и посмотрите как он отобразится в браузере.


<table border="2">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>

Теперь разберем какие теги за что отвечает в таблицах.

  • <table> - обозначает начало таблицы, все что идет после открывающего тега до закрывающего </table> является частью таблицы.
  • <tr> - или table row - строка таблицы
  • <td> - или table data - ячейка внутри строки.

Количество ячеек в каждой строке таблицы должно быть одинаковым, чтобы не ломать ее внешний вид. Давайте добавим еще две строки в нашу таблицу.


<table border="2">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
</table>

Сохраним и посмотрим на наш результат. Отлично. Пришло время добавить еще один столбец в нашу таблицу. Для этого в каждую строку нужно добавить по одной ячейке <td></td>.


<table border="2">
<tr>
<td>1</td>
<td>2</td>
<td>А</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>Б</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>В</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>Г</td>
</tr>
</table>

Мы научились добавлять в таблицу новые строки и столбцы, но как быть если нам нужна таблица с различным количеством ячеек в разных строках или если нам нужен заголовок или другая шапка таблицы? Есть решение, начнем мы с заголовка таблицы нового тега <caption></caption>. Разместим наш заголовок внутри таблицы.

<table border="2"> <caption>Заголовок таблицы</caption> <tr> <td>1</td> <td>2</td> <td>А</td> </tr> <tr> <td>3</td> <td>4</td> <td>Б</td> </tr> </table>

Так же для создания ячеек заголовков внутри таблицы используется специальный тег <th> - table header, th используется вместо td и текст в данном теге становится жирным и выравнивается по центру. Давайте заменим в первой строке нашей таблицы td на th и посмотрим что из этого выйдет.


<table border="2">
<caption>Заголовок таблицы</caption>
<tr>
<th>1</th>
<th>2</th>
<th>А</th>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>Б</td>
</tr>
</table>

Замечательно, мы практически уже знаем все об html таблицах кроме двух самых сложных вопросов, речь пойдет об объединеии ячеек в строках и столбцах. Для того чтобы объединить ячейки по горизонтали, необходимо использовать атрибут colspan у тегов <th> или <td>, это первое знакомство с атрибутами, поэтому попробуйте добавить colspan=2 тегу td или th и посмотрите на его поведение.


<table border="2">
<caption>Заголовок таблицы</caption>
<tr>
<th colspan=2>1</th>
<th>2</th>
<th>А</th>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>Б</td>
</tr>
</table>

Ячейка с атрибутом colspan=2 растянулась на 2 ячейки, при этом последняя ячейка в строке вышла за границы таблицы. Давайте увеличим значение colspan до трех и удалим из этой строчки остальные ячейки, оставив только одну.


<table border="2">
<caption>Заголовок таблицы</caption>
<tr>
<th colspan=3>1</th>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>Б</td>
</tr>
</table>

Как вы смогли заметить единственная ячейка первой строки теперь растянулась на всю строку. Попробуйте удалите атрибут colspan и посмотрите что будет. Посмотрели? Отлично. Теперь попробуем объеденить элементы по вертикали. Для этого используем атрибут тега rowspan и применим его для тега th или td.


<table border="2">
<caption>Заголовок таблицы</caption>
<tr>
<th colspan=2 rowspan=2>1</th>
<th colspan=3>2</th>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>Б</td>
</tr>
</table>

Как вы смогли понять по изменившемуся внешнему виду таблицы атрибут rowspan растягивает вниз ячейку у который он указан, при этом растягивает строку по горизонтали смещаа имевшиеся в ней ячейки вправо. На словах звучит сложно, стоит попрактиковаться чтобы все понять. На этом мы заканчиваем знакомство с таблицами в html, однако очень скоро мы вернемся к ним, когда будет изучать стиливое оформление с помощью css.

© 2015-2018 Goodweb.me --- Карта сайта --- info@goodweb.me

Наверх