Веб-мастерская Ларисы ВоронинойТаблицы HTML. Создание таблицы с помощью HTML.
WEB-мастерская Ларисы Ворониной logo

Создание таблицы с помощью HTML. Окт 25 2016


Очень часто возникает необходимость представить какие-то данные на сайте в виде таблицы.

Контейнером для таблицы HTML является парный тег <table></table>.

Заголовок таблицы оборачивается в тег <caption></caption>.

Строки таблицы заключаются в парный тег <tr></tr>, а ячейки этих строк заключаются в тег <td></td>.

Для определения границ таблицы используется свойство border, но лучше это свойство определять в файле CSS.

<!DOCTYPE html>
<html>
     <head>
          <meta charset= "utf-8">
          <title>Таблицы HTML</title>
     </head>
     <body>
          <table border= "1">
               <caption>Заголовок таблицы</caption>
               <tr>
                    <td>Ячейка 1</td>
                    <td>Ячейка 2</td>
               </tr>
               <tr>
                    <td>Ячейка 3</td>
                    <td>Ячейка 4</td>
               </tr>
          </table>
     </body>
</html>

tablicy HTML
Для объединения ячеек по горизонтали используется атрибут colspan. В качестве значения для этого атрибута используется целое положительное число, т.е. число ячеек, которые мы хотим объединить.

<!DOCTYPE html>
<html>
     <head>
          <meta charset= "utf-8">
          <title>Таблицы HTML</title>
     </head>
     <body>
          <table border= "1">
               <caption>Заголовок таблицы</caption>
               <tr>
                    <td colspan= "2">Ячейка 1 и 2</td>
               </tr>
               <tr>
                   <td>Ячейка 3</td>
                   <td>Ячейка 4</td>
               </tr>
         </table>
     </body>
</html>

tablicy HTML

Для объединения ячеек по вертикали используется атрибут rowspan.

<!DOCTYPE html>
<html>
     <head>
          <meta charset= "utf-8">
          <title>Таблицы HTML</title>
     </head>
     <body>
          <table border= "1">
               <caption>Заголовок таблицы</caption>
               <tr>
                    <td rowspan= "2">Ячейка 1</td>
                    <td>Ячейка 2</td>
               </tr>
               <tr>
                    <td>Ячейка 4</td>
               </tr>
          </table>
     </body>
</html>

tablicy HTML
Как стилизовать таблицу с помощью CSS читайте здесь.


Рейтинг@Mail.ru