Сейчас мы с вами научимся делать таблицы на 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>
: