7.Работа с таблицами на 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>

Результат:

ячейка 1	ячейка 2	ячейка 3
ячейка 4	ячейка 5	ячейка 6
ячейка 7	ячейка 8	ячейка 9

---

Ширина и высота таблицы

С помощью атрибутов 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>

Результат:

ячейка 1	ячейка 2	ячейка 3
ячейка 4	ячейка 5	ячейка 6
ячейка 7	ячейка 8	ячейка 9

---

Ячейки-заголовки

Кроме тегов 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>

Результат:

Иван	Иванов	200$
Николай	Петров	300$
Владимир	Сидоров	400$

Как вы видите, в первом столбце хранится имя работника, во втором столбце - фамилия, а в третьем - зарплата.

---

Давайте сделаем еще один ряд в начале таблице, в котором разместим заголовки колонок в тегах 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>

Результат:

Имя	Фамилия	Зарплата
Иван	Иванов	200$
Николай	Петров	300$
Владимир	Сидоров	400$

---

Источник: