тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

Работа с таблицами на HTML

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

:

Повторите страницу по данному образцу: