Сейчас мы с вами научимся делать таблицы на HTML.
Я думаю, вы представляете, что такое таблица в обычной жизни - это набор строк и столбцов, на пересечении которых находятся ячейки.
В HTML таблицы создаются по похожему принципу. Там тоже есть столбцы и строки с ячейками, однако HTML код таблиц при первом взгляде может показаться непривычным: таблицы создаются по рядам - сначала первый ряд, потом второй и так далее.
Код таблицы имеет жесткую структуру: главным является тег table, внутри которого должны лежать теги tr, которые создают ряды таблицы, а внутри них - теги td, которые создают ячейки. Тег table может иметь атрибут border, который задает границу таблице и ее ячейкам.
Давайте для примера сделаем таблицу с тремя рядами и тремя ячейками в каждом ряду:
<table border="1">
<!--Это будет первый ряд таблицы:-->
<tr>
<td>ячейка 1</td>
<td>ячейка 2</td>
<td>ячейка 3</td>
</tr>
<!--Это будет второй ряд таблицы:-->
<tr>
<td>ячейка 4</td>
<td>ячейка 5</td>
<td>ячейка 6</td>
</tr>
<!--Это будет третий ряд таблицы:-->
<tr>
<td>ячейка 7</td>
<td>ячейка 8</td>
<td>ячейка 9</td>
</tr>
</table>
:
Повторите страницу по данному образцу:
Ширина и высота таблицы
С помощью атрибутов width и height можно задать ширину и высоту таблице. Зададим, например, нашей таблице ширину в 300 пикселей, а высоту - в 200:
<table border="1" width="300" height="200">
<tr>
<td>ячейка 1</td>
<td>ячейка 2</td>
<td>ячейка 3</td>
</tr>
<tr>
<td>ячейка 4</td>
<td>ячейка 5</td>
<td>ячейка 6</td>
</tr>
<tr>
<td>ячейка 7</td>
<td>ячейка 8</td>
<td>ячейка 9</td>
</tr>
</table>
:
Добавьте вашей таблице ширину 400 пикселей и высоту 300.
Ячейки-заголовки
Кроме тегов td существуют также теги th, которые также создают ячейки. Но это уже будут не обычные ячейки, а ячейки-заголовки, которые указывают, что находится в данном столбце (или строке) таблицы. По умолчанию текст в таких ячейках th будет жирный и расположен по центру.
Давайте посмотрим на примере. Пусть у нас есть вот такая таблица с работниками:
<table border="1" width="300">
<tr>
<td>Иван</td>
<td>Иванов</td>
<td>200$</td>
</tr>
<tr>
<td>Николай</td>
<td>Петров</td>
<td>300$</td>
</tr>
<tr>
<td>Владимир</td>
<td>Сидоров</td>
<td>400$</td>
</tr>
</table>
:
Как вы видите, в первом столбце хранится имя работника, во втором столбце - фамилия, а в третьем - зарплата. Давайте сделаем еще один ряд в начале таблице, в котором разместим заголовки колонок в тегах th:
<table border="1" width="300">
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>Зарплата</th>
</tr>
<tr>
<td>Иван</td>
<td>Иванов</td>
<td>200$</td>
</tr>
<tr>
<td>Николай</td>
<td>Петров</td>
<td>300$</td>
</tr>
<tr>
<td>Владимир</td>
<td>Сидоров</td>
<td>400$</td>
</tr>
</table>
:
Повторите страницу по данному образцу: