Вы здесь

Начинаем изучать HTML таблицы

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

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

Скопируйте следующий код в тело (элемент <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 таблиц вы сможете узнать в соответствующем разделе.