Вы здесь

Таблицы

Многие вебсайты по всему Интернету используют таблицы HTML для верстки веб-страниц, иногда при этом злоупотребляя этой возможностью. В учебнике "CSS продвинутого уровня" мы поговорим о том, как можно сверстать веб-страницу без таблиц. Единственный способ корректного использования таблиц – это то, для чего они и предназначены, а именно для отображения табличных данных.

Существует достаточно много тегов, используемых для создания таблиц, и полностью понять, как они работают, вероятно, является самой трудной задачей в этом учебнике для начинающих.

Скопируйте следующий код в тело (элемент body) ранее созданной вами веб-страницы, а затем мы рассмотрим, какая роль у каждого тега таблицы:

<table>
    <tr>
         <td>Строка 1, ячейка 1</td>
         <td>Строка 1, ячейка 2</td>
         <td>Строка 1, ячейка 3</td>
    </tr>
    <tr>
         <td>Строка 2, ячейка 1</td>
         <td>Строка 2, ячейка 2</td>
         <td>Строка 2, ячейка 3</td>
    </tr>
    <tr>
         <td>Строка 3, ячейка 1</td>
         <td>Строка 3, ячейка 2</td>
         <td>Строка 3, ячейка 3</td>
    </tr>
    <tr>
         <td>Строка 4, ячейка 1</td>
         <td>Строка 4, ячейка 2</td>
         <td>Строка 4, ячейка 3</td>
    </tr>
</table>

Элемент table создает таблицу.

Элемент tr создает строку таблицы.

Элемент td создает ячейку данных. Этот тег должен находится внутри элемента tr, как показано в примере.

Если вам нужна таблица 3x4, т.е. состоящая из 12 ячеек, то у вас внутри элемента table должно быть четыре элемента tr, определяющие строки, и три элемента td внутри каждого элемента строк, что в сумме и даст 12 элементов td.

Этих элементов достаточно, чтобы создать простую таблицу. О более продвинутых средствах создания HTML таблиц можно прчитать в учебнике "HTML среднего уровня".