Как сделать таблицу в html
Чтобы узнать, как сделать таблицу html нужно использовать три тега - table, tr, td. Все довольно просто:
table - тег обертки одной таблицы
tr - строка таблицы
td - ячейка строки
Простой пример кода создания таблицы
<table> <tr> <td>Ячейка 1.1</td> <td>Ячейка 1.2</td> </tr> <tr> <td>Ячейка 2.1</td> <td>Ячейка 2.2</td> </tr> </table>
На экране мы увидим следующее:
Ячейка 1.1 | Ячейка 1.2 |
Ячейка 2.1 | Ячейка 2.2 |
Не особо видно, что это таблица, так как у неё должны быть рамки, добавим их через атрибут border для тега table
И вот, что мы получим:
Ячейка 1.1 | Ячейка 1.2 |
Ячейка 2.1 | Ячейка 2.2 |
Можно также указать ширину таблицы, относительно родительского блока, для этого возьмём атрибут width, например 50%
Вот мы видим, что таблица растянулась на 50% ширины контента сайта.
Ячейка 1.1 | Ячейка 1.2 |
Ячейка 2.1 | Ячейка 2.2 |
Также этот атрибут можно применить для любой ячейки таблицы, ширина которой будет браться относительно размерам таблицы.
<table width="100%" border="1"> <tr> <td width="70%">Ячейка 1.1</td> <td>Ячейка 1.2</td> </tr> <tr> <td>Ячейка 2.1</td> <td>Ячейка 2.2</td> </tr> </table>
Ячейка 1.1 | Ячейка 1.2 |
Ячейка 2.1 | Ячейка 2.2 |
Как вы заметили, Ячейка 2.1 такой же длинны, как и Ячейка 1.1, даже если мы укажем ширину для второй ячейки, она не изменится, обратите на это внимание.
Комментарии