Название таблицы html – HTML таблицы продвинутые возможности и доступность — Изучение веб-разработки

Название таблицы в HTML | WebShake.RU

Название таблицы в HTML

Привет всем! Ну что же, Вас есть с чем поздравить! Отныне вы умеете создавать самые простые таблицы, а также осуществлять их оформление и они не выглядят такими нелепыми, как те что были в первом уроке этого уровня, не так ли? Уверен, Вы ожидаете от таблиц чего-то ещё более интересного. Всё впереди, уж поверьте мне!

А теперь пришло время рассказать, как добавить подпись к таблице, которую еще можно назвать заголовком таблицы, или её названием. Это такая поясняющая надпись, где написано, что это за таблица и для чего она вообще нужна.

Давайте рассмотрим следующий код:

Таблица умножения
<table>
    <tr>
        <td>*</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>2</td>
        <td>4</td>
        <td>6</td>
    </tr>
    <tr>
        <td>3</td>
        <td>6</td>
        <td>9</td>
    </tr>
</table>

И посмотрим на результат в браузере:
Название таблицы в HTML

Подпись, которая называется Таблица умножения является просто текстом. Конечно, с визуальной точки зрения, видно, что данное словосочетание представляет собой название таблицы. Но если решать данную задачу с учетом семантики, то более корректным будет использование тега <caption>

.

Располагается этот тег внутри <table>. И кроме этого, если в <table> есть еще теги, то <caption> должен идти первым. Вот как это выглядит на примере:

<table>
    <caption>Таблица умножения</caption>
    ...
</table>

Таблица с названием

Пример показывает, что внутри таблицы тег с заголовком занимает первое место. Однако, если использовать для решения данной задачи CSS, то заголовок таблицы может быть расположен относительно нее как угодно: сверху, снизу, по центру, слева, справа.

Чтобы переместить заголовок таблицы в вертикальном направлении, следует использовать такое CSS-свойство, как caption-side. Добавив к нему значение top, можно поставить заголовок перед таблицей, а значение

bottom позволит разместить его после таблицы.

Например:

...
        table {
            border: solid 1px blue;
            border-collapse: collapse;
            caption-side: bottom;
        }
...

Результат:
Таблица с подписью внизу

Чтобы двигать заголовок в горизонтальном направлении, следует использовать CSS-свойство text-align. Значения left, right и center позволяют разместить заголовок слева, справа и по центру, соответственно.

Например:

...
    <style>
        table {
            border: solid 1px blue;
            border-collapse: collapse;
            caption-side: bottom;
        }

        table caption {
            text-align: left;
        }

        td {
            border: solid 1px blue;
            padding: 10px;
        }
    </style>
...

Результат:
Таблица с подписью внизу слева

loader

Заголовок таблицы | WebReference

При большом количестве таблиц на странице каждой из них удобно задать свой заголовок, содержащий название таблицы и её описание. Для этой цели в HTML существует специальный элемент <caption>, который устанавливает текст заголовка. По умолчанию заголовок помещается сверху таблицы по центру, его ширина не превышает ширины таблицы, и в случае длинного текста он автоматически переносится на новую строку. Для изменения положения заголовка используется стилевое свойство text-align, как показано в примере 1.

Пример 1. Выравнивание заголовка таблицы

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица</title>
  <style>
   table {
    border: 1px solid #333;
    width: 90%;
    margin: auto;
   }
   td {
    text-align: center;
   }
   caption {
    text-align: right;
    font-style: italic;
   }
  </style>
 </head>
 <body>
  <table>
   <caption>Изменение добычи ресурсов по годам</caption>
   <tr>
    <th></th>
    <th>2023</th><th>2024</th><th>2025</th>
   </tr>
   <tr>
    <td>Heфть</td>
    <td>43</td><td>51</td><td>79</td>
   </tr>
   <tr>
    <td>3oлoтo</td>
    <td>29</td><td>34</td><td>48</td>
   </tr>
   <tr>
    <td>Дерево</td>
    <td>38</td><td>57</td><td>36</td>
   </tr>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 1. Удобство использования <caption> состоит в том, что заголовок, созданный с его помощью, оказывается привязанным к таблице и не выходит за условные рамки, ограниченные её шириной.

Вид заголовка таблицы

Рис. 1. Вид заголовка таблицы

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 11.11.2015

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

HTML таблица, заголовок таблицы, ширина ячейки

 

 

html таблица

HTML ширина ячейки таблицы и ее высота (размер ячеек)

HTML высота ячеек и их ширина, размер определяется следующими атрибутами:

<html>
<head>
<title>Пример таблицы: HTML высота ячейки и ее ширина, размеры ячеек</title>
</head>
<body>
<table border=»1″ cellspacing=»0″ cellpadding=»12″>

<tr>
<td>ячейка 1, первый ряд</td>
<td>ячейка 2, первый ряд</td>
</tr>
<tr>
<td>ячейка 1, второй ряд</td>
<td>ячейка 2, второй ряд</td>
</tr>
</table> 
</body>
</html>

Результат:

ячейка 1, первый ряд

ячейка 2, первый ряд

ячейка 1, второй ряд

ячейка 2, второй ряд

Были установлены размеры первой ячейки из первого ряда. В итоге вторая ячейка, этого же ряда унаследовала высоту первой, а первая ячейка, второгo ряда — ее ширину (ширину первой ячейки, первого ряда). Такова особенность взаимодействия элементов HTML таблицы.

 

Горизонтальное HTML выравнивание в таблице и в ячейке, текст

HTML выравнивание внутри таблицы. Текст слева, справа, по центру ячеек таблицы:

<html>
<head>
<title>Пример: текст в таблице, HTML выравнивание в ячейке</title>
</head>
<body>
<table border=»1″ cellspacing=»0″ cellpadding=»17″>
<tr>
<td align=»left»>ячейка 1</td>
<td align=»right»>ячейка 2</td>
<td align=»center»>ячейка 3</td>
</tr>
</table> 
</body>
</html>

Результат:

ячейка 1

ячейка 2

ячейка 3

 

Вертикальное выравнивание текста внутри HTML таблицы

HTML выравнивание в таблице. Текст вверху, внизу, по центру ячеек таблицы:

<html>

<head>
<title>Пример: текст в таблице, HTML выравнивание в ячейке</title>
</head>
<body>
<table border=»1″ cellspacing=»0″ cellpadding=»17″>
<tr>
<td valign=»top»>ячейка 1</td>
<td valign=»bottom»>ячейка 2</td>
<td valign=»middle»>ячейка 3</td>
</tr>
</table> 
</body>
</html>

Результат:

ячейка 1

ячейка 2

ячейка 3

Атрибут valign определяет вертикальное выравнивание текста внутри таблицы.

 

Теги, определяющие заголовок HTML таблицы

HTML заголовки таблицы:

<html>
<head>
<title>Примеры заголовков</title>

</head>
<body>
<table border=»1″ cellspacing=»0″ cellpadding=»10″>
<tr>
<th>Заголовок</th>
<th>Заголовок</th>
<th>Заголовок</th>
</tr>
<tr>
<td>Текст</td>
<td>Текст</td>
<td>Текст</td>
</tr>
<tr>
<td>Текст</td>
<td>Текст</td>
<td>Текст</td>
</tr>
</table> 
</body>
</html>

Результат:

Заголовок

Заголовок

Заголовок

Текст

Текст

Текст

Текст

Текст

Текст

Теги <th> </th> определяют заголовок HTML таблицы.

 

HTML таблица по центру, с левой, с правой стороны

Горизонтальное расположение HTML таблицы внутри web-страницы:

<html>
<head>
<title>Примеры HTML таблиц</title>
</head>
<body>
<table align=»center» bgcolor=»#006699″>
<tr>
<td>
<p>align=»center»</p>
</td>
</tr>
</table>
   <table align=»left» bgcolor=»#cc0000″>
   <tr>
   <td>
   <p>align=»left»</p>
   </td>
   </tr>
   </table>
<table align=»right» bgcolor=»#66cc66″>
<tr>
<td>
<p>align=»right»</p>
</td>
</tr>
</table>
</body>
</html>

Результат: HTML таблица по центру страницы, слева, справа

В примере выше показаны три отдельные таблицы, каждая из которых состоит из одной ячейки.bgcolor – HTML атрибут – определяет цвет фона. В предыдущем уроке мы использовали его CSSаналог – background-color.

 

HTML таблица расположена внутри ячейки

Пример:

<html>
<head>
<title>Примеры HTML таблицы</title>
</head>
<body>
<table border=»1″ cellspacing=»0″ bgcolor=»#cccccc»>
<tr>
<td> &nbsp; </td>
<td align=»center»>
    <table border=»1″ cellspacing=»5″>
    <tr>
    <td> &nbsp; </td>
    <td> &nbsp; </td>
    </tr>
    <tr>
    <td> &nbsp; </td>
    <td> &nbsp; </td>
    </tr>
    </table>
</td>
</tr>
</table> 
</body>
</html>

Результат: HTML таблица внутри ячейки другой таблицы

Внутри второй ячейки находится еще одна таблица со своими атрибутами, значениями и стилями.

Размеры и фон внутренней таблицы, в отличае от внешней, заданы с помошью CSS.

Добавить комментарий

Ячейки-заголовки в таблице HTML | WebShake.RU

Ячейки-заголовки в таблице HTML

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

Как правило, при создании таблиц названия их столбцов и строк выделяются. В HTML это можно сделать, используя тег <th>. Название тега представляет собой аббревиатуру, которая читается как table header. Этот тег обозначает ячейку-заголовок. Как и тег <td>, тег <th> должен присутствовать внутри тега <tr>. А стили можно использовать для того, чтобы задать для него аналогичные свойства.

По умолчанию работа тега <th> заключается в том, что он выделяет текст жирным, а также размещает его по центру ячейки.

Пример:

<table>
    <caption>Таблица умножения</caption>
    <tr>
        <th>*</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr>
        <th>2</th>
        <td>4</td>
        <td>6</td>
    </tr>
    <tr>
        <th>3</th>
        <td>6</td>
        <td>9</td>
    </tr>
</table>

И добавим тегу <th> такие же стили, как и у тега <td>:

...
        td, th {
            border: solid 1px blue;
            padding: 10px;
        }
...

Результат:
Таблица с ячейками-заголовками

loader

HTML-таблицы

HTML-таблицы позволяют веб-авторам упорядочивать данные, такие как текст, изображения, ссылки, другие таблицы и т.д. в строки и столбцы ячеек.
HTML-таблицы создаются с помощью тега <table>, в котором тег <tr> используется для создания строк таблицы и тег <td> используется для создания ячеек данных. Элементы под тегом  <td>  являются регулярными и по умолчанию выровнены по левому краю.
Пример

<!DOCTYPE html> <html> <head> <title>HTML Таблица</title> </head> <body> <table border = «1»> <tr> <td>Строка 1, Колонка 1</td> <td>Строка 1, Колонка 2</td> </tr> <tr> <td>Строка 2, Колонка 1</td> <td>Строка 2, Колонка 2</td> </tr> </table> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!DOCTYPE html>

<html>

   <head>

      <title>HTML Таблица</title>

   </head>

   <body>

      <table border = «1»>

         <tr>

            <td>Строка 1, Колонка 1</td>

            <td>Строка 1, Колонка 2</td>

         </tr>        

         <tr>

            <td>Строка 2, Колонка 1</td>

            <td>Строка 2, Колонка 2</td>

         </tr>

      </table>    

   </body>

</html>

В результате будет получено —

Здесь, border является атрибутом <table>  и он использован для того чтобы поставить границы для всех ячеек. Если вам не нужна граница, то вы можете использовать border = «0».

Заголовок таблицы
Заголовок таблицы определяется тегом <th>. Этот тег заменит тег <td>, который используется для представления фактической ячейки данных. Обычно верхняя строка используется  в качестве заголовка таблицы, как показано ниже. Заголовки, определенные в теге <th>, по умолчанию центрированы и выделены жирным шрифтом.

<!DOCTYPE html> <html> <head> <title>HTML таблица — заголовок</title> </head> <body> <table border = «1»> <tr> <th>Имя</th> <th>Зарплата</th> </tr> <tr> <td>Иван</td> <td>5000</td> </tr> <tr> <td>Петр</td> <td>7000</td> </tr> </table> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<!DOCTYPE html>

<html>

   <head>

      <title>HTML таблица — заголовок</title>

   </head>

   <body>

      <table border = «1»>

         <tr>

            <th>Имя</th>

            <th>Зарплата</th>

         </tr>

         <tr>

            <td>Иван</td>

            <td>5000</td>

         </tr>      

         <tr>

            <td>Петр</td>

            <td>7000</td>

         </tr>

      </table>

   </body>  

</html>

В результате будет получено —

Атрибуты Cellpadding и Cellspacing
Атрибута cellpadding и cellspacing используются для корректировки пробелов в ячейках таблицы. Атрибут cellspacing определяет пространство между ячейками таблицы, в то время как cellpadding представляет расстояние между границами ячейки и содержимым внутри ячейки.

<!DOCTYPE html> <html> <head> <title>HTML Table Cellpadding</title> </head> <body> <table border = «1» cellpadding = «5» cellspacing = «5»> <tr> <th>Имя</th> <th>Зарплата</th> </tr> <tr> <td>Иван</td> <td>5000</td> </tr> <tr> <td>Петр</td> <td>7000</td> </tr> </table> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<!DOCTYPE html>

<html>

   <head>

      <title>HTML Table Cellpadding</title>

   </head>

   <body>

      <table border = «1» cellpadding = «5» cellspacing = «5»>

         <tr>

            <th>Имя</th>

            <th>Зарплата</th>

         </tr>

         <tr>

            <td>Иван</td>

            <td>5000</td>

         </tr>      

         <tr>

            <td>Петр</td>

            <td>7000</td>

         </tr>

      </table>

   </body>

</html>

В результате будет получено —

Атрибуты Colspan и Rowspan
Атрибут colspan используется если надо объединить два или несколько столбцов в один столбец. Подобным образом вы будете использовать свойство rowspan если надо объединить два или более строк.

<!DOCTYPE html> <html> <head> <title>HTML Table Colspan/Rowspan</title> </head> <body> <table border = «1»> <tr> <th>Колонка 1</th> <th>Колонка 2</th> <th>Колонка 3</th> </tr> <tr> <td rowspan = «2»>Строка 1 Ячейка 1</td> <td>Строка 1 Ячейка 2</td> <td>Строка 1 Ячейка 3</td> </tr> <tr> <td>Строка 2 Ячейка 2</td> <td>Строка 2 Ячейка 3</td> </tr> <tr> <td colspan = «3»>Строка 3 Ячейка 1</td> </tr> </table> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<!DOCTYPE html>

<html>

   <head>

      <title>HTML Table Colspan/Rowspan</title>

   </head>

   <body>

      <table border = «1»>

         <tr>

            <th>Колонка 1</th>

            <th>Колонка 2</th>

            <th>Колонка 3</th>

         </tr>

         <tr>

            <td rowspan = «2»>Строка 1 Ячейка 1</td>

            <td>Строка 1 Ячейка 2</td>

            <td>Строка 1 Ячейка 3</td>

         </tr>

         <tr>

            <td>Строка 2 Ячейка 2</td>

            <td>Строка 2 Ячейка 3</td>

         </tr>

         <tr>

            <td colspan = «3»>Строка 3 Ячейка 1</td>

         </tr>

      </table>

   </body>

</html>

В результате будет получено —

Фон таблицы
Фон таблицы можно установить с помощью одного из следующих двух способов −

  • атрибут bgcolor − задает цвет фона для всей таблицы или только на одну клетку.
  • атрибут background — можно задать фоновый рисунок для всей таблицы или только на одну клетку.

Можно установить цвет границы, используя атрибут bordercolor.
Пример

<!DOCTYPE html> <html> <head> <title>HTML Table Background</title> </head> <body> <table border = «1» bordercolor = «green» bgcolor = «yellow»> <tr> <th>Колонка 1</th> <th>Колонка 2</th> <th>Колонка 3</th> </tr> <tr> <td rowspan = «2»>Строка 1 Ячейка 1</td> <td>Строка 1 Ячейка 2</td> <td>Строка 1 Ячейка 3</td> </tr> <tr> <td>Строка 2 Ячейка 2</td> <td>Строка 2 Ячейка 3</td> </tr> <tr> <td colspan = «3»>Строка 3 Ячейка 1</td> </tr> </table> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<!DOCTYPE html>

<html>

   <head>

      <title>HTML Table Background</title>

   </head>

   <body>

      <table border = «1» bordercolor = «green» bgcolor = «yellow»>

       <tr>

            <th>Колонка 1</th>

            <th>Колонка 2</th>

            <th>Колонка 3</th>

         </tr>

         <tr>

            <td rowspan = «2»>Строка 1 Ячейка 1</td>

            <td>Строка 1 Ячейка 2</td>

            <td>Строка 1 Ячейка 3</td>

         </tr>

         <tr>

            <td>Строка 2 Ячейка 2</td>

            <td>Строка 2 Ячейка 3</td>

         </tr>

         <tr>

            <td colspan = «3»>Строка 3 Ячейка 1</td>

         </tr>

      </table>

   </body>

</html>

В результате будет получено —

Пример использования в качестве фона изображения-

<!DOCTYPE html> <html> <head> <title>HTML Table Background</title> </head> <body> <table border = «1» bordercolor = «green» background = «/html/images/test.png»> <tr> <th>Колонка 1</th> <th>Колонка 2</th> <th>Колонка 3</th> </tr> <tr> <td rowspan = «2»>Строка 1 Ячейка 1</td> <td>Строка 1 Ячейка 2</td> <td>Строка 1 Ячейка 3</td> </tr> <tr> <td>Строка 2 Ячейка 2</td> <td>Строка 2 Ячейка 3</td> </tr> <tr> <td colspan = «3»>Строка 3 Ячейка 1</td> </tr> </table> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<!DOCTYPE html>

<html>

   <head>

      <title>HTML Table Background</title>

   </head>

   <body>

      <table border = «1» bordercolor = «green» background = «/html/images/test.png»>

     <tr>

            <th>Колонка 1</th>

            <th>Колонка 2</th>

            <th>Колонка 3</th>

         </tr>

         <tr>

            <td rowspan = «2»>Строка 1 Ячейка 1</td>

            <td>Строка 1 Ячейка 2</td>

            <td>Строка 1 Ячейка 3</td>

         </tr>

         <tr>

            <td>Строка 2 Ячейка 2</td>

            <td>Строка 2 Ячейка 3</td>

         </tr>

         <tr>

            <td colspan = «3»>Строка 3 Ячейка 1</td>

         </tr>

      </table>

   </body>

</html>

В результате будет получено —

Высота и ширина таблицы
Задать таблице ширину и высоту можно с помощью атрибутов width и height . Ширину или высоту таблицы можно задавать в пикселях или в процентах от доступной области экрана.

<!DOCTYPE html> <html> <head> <title>HTML таблица Width/Height</title> </head> <body> <table border = «1» width = «400» height = «150»> <tr> <td>Строка 1, Колонка 1</td> <td>Строка 1, Колонка 2</td> </tr> <tr> <td>Строка 2, Колонка 1</td> <td>Строка 2, Колонка 2</td> </tr> </table> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!DOCTYPE html>

<html>

   <head>

      <title>HTML таблица Width/Height</title>

   </head>

   <body>

      <table border = «1» width = «400» height = «150»>

         <tr>

            <td>Строка 1, Колонка 1</td>

            <td>Строка 1, Колонка 2</td>

         </tr>        

         <tr>

            <td>Строка 2, Колонка 1</td>

            <td>Строка 2, Колонка 2</td>

         </tr>

      </table>

   </body>

</html>

В результате будет получено —

Заголовок, тело и нижний колонтитул таблицы
Таблицу можно разделить на три части — шапку, тело и футер (окончание). Шапка и футер очень похожи на верхние и нижние колонтитулы в текстовом документе, которые остаются одинаковыми для каждой страницы, в то время как тело является основным держателем содержимого таблицы.
Три элемента для разделения шапки, тела и футера таблицы:

  • <thead> − создает отдельный заголовок таблицы.
  • <tbody> − указывает на основную часть таблицы.
  • <tfoot> − создает отдельную таблицу футер.

Таблица может содержать несколько <tbody> элементов для указания различных страниц или групп данных. Теги <thead> и <tfoot> должны располагаться перед <tbody>

<!DOCTYPE html> <html> <head> <title>HTML Таблица</title> </head> <body> <table border = «1» width = «100%»> <thead> <tr> <td colspan = «4»>Это шапка таблицы</td> </tr> </thead> <tfoot> <tr> <td colspan = «4»>Это футер таблицы</td> </tr> </tfoot> <tbody> <tr> <td>Ячейка 1</td> <td>Ячейка 2</td> <td>Ячейка 3</td> <td>Ячейка 4</td> </tr> </tbody> </table> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

<!DOCTYPE html>

<html>

   <head>

      <title>HTML Таблица</title>

   </head>

   <body>

      <table border = «1» width = «100%»>

         <thead>

            <tr>

               <td colspan = «4»>Это шапка таблицы</td>

            </tr>

         </thead>        

         <tfoot>

            <tr>

               <td colspan = «4»>Это футер таблицы</td>

            </tr>

         </tfoot>        

         <tbody>

            <tr>

               <td>Ячейка 1</td>

               <td>Ячейка 2</td>

               <td>Ячейка 3</td>

               <td>Ячейка 4</td>

            </tr>

         </tbody>        

      </table>

   </body>

</html>

В результате будет получено —

Вложенная таблица
Можно использовать одну таблицу внутри другой таблицы.
Пример использования другой таблицы и других тегов внутри ячейки таблицы.

<!DOCTYPE html> <html> <head> <title>HTML Table</title> </head> <body> <table border = «1» width = «100%»> <tr> <td> <table border = «1» width = «100%»> <tr> <th>Имя</th> <th>Зарплата</th> </tr> <tr> <td>Иван</td> <td>5000</td> </tr> <tr> <td>Петр</td> <td>7000</td> </tr> </table> </td> </tr> </table> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

<!DOCTYPE html>

<html>

   <head>

      <title>HTML Table</title>

   </head>

   <body>

      <table border = «1» width = «100%»>        

         <tr>

            <td>

               <table border = «1» width = «100%»>

                  <tr>

                     <th>Имя</th>

                     <th>Зарплата</th>

                  </tr>

                  <tr>

                     <td>Иван</td>

                     <td>5000</td>

                  </tr>

                  <tr>

                     <td>Петр</td>

                     <td>7000</td>

                  </tr>

               </table>

            </td>

         </tr>        

      </table>

   </body>

</html>

Результат будет следующий —

Вложенная таблица

Таблицы | Учебные курсы | WebReference

Таблицы применяются для группирования и упорядочивания данных по столбцам или строкам. Каждая таблица состоит нескольких элементов.

Ячейка — минимальная единица таблицы, в ячейке располагаются сами данные, это может быть текст, картинки или что-то ещё.

Ячейка таблицы

Ячейка таблицы

Строка — совокупность ячеек, расположенных рядом друг с другом по горизонтали.

Строка

Строка

Колонка — совокупность ячеек, расположенных друг под другом по вертикали.

Колонка

Колонка

Минимальная таблица состоит из одной единственной ячейки, кроме того, таблица может быть с единственной строкой или единственной колонкой.

Кроме этих перечисленных элементов таблица может содержать и другие не обязательные элементы.

Заголовок таблицы — текстовая строка, предназначенная для названия таблицы или её описания.

Название таблицы

Заголовок таблицы

Ячейка заголовка — ячейка, которая применяется для обозначения заголовка колонки или строки таблицы. Браузеры, как правило, текст в такой ячейке отображают жирным начертанием и выравнивают по центру.

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

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

Создание таблицы

Для добавления таблицы на веб-страницу используется элемент <table>, он служит контейнером для элементов, определяющих содержимое таблицы. Формирование таблицы происходит по строкам — вначале мы создаём строку с помощью элемента <tr> (от англ. «table row», строка таблицы), затем уже внутрь <tr> добавляем нужное число ячеек через элемент <td> (от англ. «table data», табличные данные). Оба элемента обязательны, даже если у нас в таблице только одна ячейка.

Вместо <td> допускается использовать элемент <th> (от англ. «table header», заголовок таблицы). Текст в ячейке, оформленной с помощью <th>, отображается браузером шрифтом жирного начертания и выравнивается по центру ячейки (пример 1). В остальном, разницы между ячейками, созданными через <td> и <th> нет.

Пример 1. Создание таблицы

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица</title>
 </head>
 <body>
  <table border="1">
   <tr>
    <th>Ячейка 1</th>
    <th>Ячейка 2</th>
   </tr>
   <tr>
    <td>Ячейка 3</td>
    <td>Ячейка 4</td>
   </tr>
  </table>
 </body>
</html>

Порядок вывода ячеек и их вид показан на рис. 1.

Результат создания таблицы с четырьмя ячейками

Рис. 1. Результат создания таблицы с четырьмя ячейками

Вид таблицы настраивается с помощью CSS, в том числе цвет и толщина рамки, атрибут border приведён лишь для того, чтобы показать границы ячеек.

Особенности таблиц

  • Размеры таблицы изначально не установлены и вычисляются на основе содержимого ячеек. Например, общая ширина определяется автоматически, исходя из суммарной ширины содержимого ячеек.
  • Максимальная ширина таблицы — это, как правило, всё доступное пространство по ширине. Большой текст внутри ячеек переносится и форматируется браузером так, чтобы таблица заняла всю ширину. Но бывают исключения, когда внутри ячеек добавляются широкие картинки, в таком случае ширина таблицы может превысить ширину окна браузера и появится горизонтальная полоса прокрутки.
  • Содержимое ячеек по умолчанию выравнивается по центру вертикали. Если содержимое ячеек различается по объёму, то в одной ячейке снизу и сверху текста появится пустое пространство.

Заголовок таблицы

При большом количестве таблиц на странице, каждой из них удобно задать своё название. Для этой цели в HTML существует специальный элемент <caption>, который устанавливает текстовый заголовок, он располагается сверху таблицы по центру, его ширина не превышает ширины таблицы, и в случае длинного текста он автоматически переносится на новую строку.

Элемент <caption> должен идти сразу же после открывающего тега <table> (пример 2).

Пример 2. Использование <caption>

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица</title>
 </head>
 <body>
  <table>
   <caption>Изменение добычи ресурсов по годам</caption>
   <tr>
    <th></th>
    <th>2023</th><th>2024</th><th>2025</th>
   </tr>
   <tr>
    <td>Heфть</td>
    <td>43</td><td>51</td><td>79</td>
   </tr>
   <tr>
    <td>3oлoтo</td>
    <td>29</td><td>34</td><td>48</td>
   </tr>
   <tr>
    <td>Дерево</td>
    <td>38</td><td>57</td><td>36</td>
   </tr>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 2. Удобство использования <caption> состоит в том, что заголовок, созданный с его помощью, оказывается привязанным к таблице и не выходит за условные рамки, ограниченные её шириной.

Вид заголовка таблицы

Рис. 2. Вид заголовка таблицы

Объединение ячеек

Мы пока рассмотрели достаточно простые таблицы, в которых число ячеек в каждой строке и колонке одинаковое. Но порой встречаются таблицы, где в разных строках или колонках число ячеек различается. Это требуется для создания сложных таблиц, где, к примеру, заголовок охватывает сразу несколько ячеек (рис. 3).

Таблица с объединёнными ячейками

Рис. 3. Таблица с объединёнными ячейками

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

<table>
 <tr>
  <td>1</td><td>2</td>
 </tr>
 <tr>
  <td>3</td>
 </tr>
</table>

Потому что это приведёт лишь к созданию «дыры» в таблице, поскольку число ячеек в первой строке не совпадает с числом ячеек во второй строке (рис. 4).

Неверное число ячеек

Рис. 4. Неверное число ячеек

Теперь мы добавляем атрибут colspan к элементу <td> (или к <th>, если это требуется) со значением 2 и получаем одну ячейку, ширина которой равна ширине двух ячеек.

<table>
 <tr>
  <td>1</td><td>2</td>
 </tr>
 <tr>
  <td colspan="2">3</td>
 </tr>
</table>

На рис. 5 показана таблица, для которой мы применили colspan.

Результат использования colspan

Рис. 5. Результат использования colspan

Аналогично обстоит дело и с атрибутом rowspan, который объединяет ячейки по строкам или по вертикали, иными словами. В примере 3 показан код для создания таблицы, продемонстрированной на рис. 3.

Пример 3. Объединение ячеек

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Объединение ячеек</title>
 </head>
 <body>
  <table border="1">
   <tr>
    <td rowspan="2">Вид соединения</td>
    <td colspan="2">Поля допусков ширины шпоночного паза</td>
   </tr>
   <tr>
    <td>Вал</td><td>Втулка</td>
   </tr>
   <tr>
    <td>Свободное</td><td>H9</td><td>D10</td>
   </tr>
   <tr>
    <td>Нормальное</td><td>N9</td><td>I<sub>s</sub>9</td>
   </tr>
   <tr>
    <td>Плотное</td><td colspan="2">P9</td>
   </tr>
  </table>
 </body>
 </html>

В данной таблице установлено три колонки и три строки. Первые две ячейки объединены по вертикали, а следующие две — по горизонтали.

Перейти к заданиям

И снова таблицы.. Учебник html

Глава 12

Данная глава является продолжением 4 главы про таблицы, отложил я её на потом по нескольким причинам. Во-первых, четвёртая глава и без того получилась длинноватой и «неповоротливой».. Во-вторых, не хотел, что бы Вы на тот момент погрязли в изучении таблиц и так сказать топтались на месте.. обучение, на мой взгляд, должно происходить живенько, интересно, а главное результативно! Зато теперь, когда у Вас сложилось общее представление о HTML, Вы разобрались с его базовой частью, сделали свой первый нехитрый сайт, можно наращивать багаж знаний, умений и навыков. Ну и в-третьих, я надеюсь, что Вы к этому времени, параллельно начали изучать CSS.. что разве ещё нет? жаль.. Дело в том, что далее в этом учебнике нет нет будут попадаться вещи, которые сами по себе могут показаться бесполезными и бессмысленными, однако в купе с другими науками они порой незаменимы!

Ладно, вернёмся к таблицам..

В качестве «полигона» для изучения нового материала возьмём вот такую жутко скучную таблицу:

ПродуктБелкиЖирыУглеводыккал
Хлеб ржаной4,70,749,8214
Молоко2,83,24,758
Картофель20,119,783
Свинина11,449,39489
Итого:20,953,383,2844

Ну что ж, давайте поколдуем над ней..

Любая ячейка таблицы может быть определена как заголовок. Для того чтобы сделать ячейку таблицы заголовком нужно вместо знакомого тега <td> использовать тег <th>.

Например, вот так:

<table>
<tr>
<th>Данная ячейка является заголовком</th>
</tr>
</table>

Как правило, текст ячейки определённый в качестве заголовка отображается браузерами жирным шрифтом по центру ячейки.

Ну что давайте попробуем сделать некоторые ячейки нашей таблицы заголовками? смотрим пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Заголовок таблицы</title>
</head>
<body>
<table border=»1″ cellpadding=»3″ cellspacing=»0″>
<tr>
<th>Продукт</th><th>Белки</th><th>Жиры</th><th>Углеводы</th><th>ккал</th>
</tr>
<tr>
<th>Хлеб ржаной</th><td>4,7</td><td>0,7</td><td>49,8</td><td>214</td>
</tr>
<tr>
<th>Молоко</th><td>2,8</td><td>3,2</td><td>4,7</td><td>58</td>
</tr>
<tr>
<th>Картофель</th><td>2</td><td>0,1</td><td>19,7</td><td>83</td>
</tr>
<tr>
<th>Свинина</th><td>11,4</td><td>49,3</td><td>9</td><td>489</td>
</tr>
<tr>
<th>Итого:</th><td>20,9</td><td>53,3</td><td>83,2</td><td>844</td>
</tr>
</table>
</body>
</html>

К тегу <th> могут применятся точно такие же атрибуты как и к тегу <td> о них мы говорили в 4 главе поэтому повторятся не буду, а просто перечислю их:

  • width — Ширина ячейки в процентах или пикселях.
  • height — Высота ячейки в процентах или пикселях.
  • align — Выравнивает текст в ячейке:
    • left — по левому краю.
    • right — по правому краю.
    • center — по центру.
    • justify — по левому и правому краю.
  • valign — Выравнивает текст в ячейке по вертикали:
    • top — по верхнему краю.
    • middle — по центру.
    • bottom — по нижнему краю.
    • baseline — по базовой линии.
  • colspan — количество столбцов занимаемое ячейкой.
  • rowspan — количество рядов занимаемое ячейкой.
  • bgcolor — Цвет фона ячейки.
  • background — Задает фоновый рисунок в ячейке.
  • bordercolor — Цвет бордюра.
  • title — Всплывающая подсказка
  • nowrap — Запрещает перенос строк в ячейке.

Думаю понятно, а посему идем дальше..

Тег <caption> позволяет озаглавить таблицу, подписать её каким либо текстом. Данный тег должен располагаться внутри таблицы сразу после <table>

<table>
<caption>Название таблицы</caption>
<tr>
<td>ячейка</td>
</tr>
</table>

Вот пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Название таблицы</title>
</head>
<body>
<table border=»1″ cellpadding=»3″ cellspacing=»0″>
<caption><b>Энергетическая ценность продуктов питания:</b></caption>
<tr>
<th>Продукт</th><th>Белки</th><th>Жиры</th><th>Углеводы</th><th>ккал</th>
</tr>
<tr>
<th>Хлеб ржаной</th><td>4,7</td><td>0,7</td><td>49,8</td><td>214</td>
</tr>
<tr>
<th>Молоко</th><td>2,8</td><td>3,2</td><td>4,7</td><td>58</td>
</tr>
<tr>
<th>Картофель</th><td>2</td><td>0,1</td><td>19,7</td><td>83</td>
</tr>
<tr>
<th>Свинина</th><td>11,4</td><td>49,3</td><td>9</td><td>489</td>
</tr>
<tr>
<th>Итого:</th><td>20,9</td><td>53,3</td><td>83,2</td><td>844</td>
</tr>
</table>
</body>
</html>

К тегу <caption> может быть применён атрибут align — выравнивание названия таблицы по горизонтали с возможными значениями left, right и center, а также атрибут valign который говорит от том где должно располагаться название сверху — top или снизу — bottom таблицы.

Однако хочу отметить, что данные атрибуты в разных браузерах ведут себя по разному, так например, запись:

<caption align=»left»>Текст</caption>

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

Так же название таблицы или её краткое описание можно указывать с помощью атрибута summary тега <table>

Вот так:

<table summary=»описание таблицы»>

Такое описание никак не отображается и не выводится на экран обычными браузерами, однако может быть использовано поисковыми системами, а так же речевыми браузерами.

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Описание таблицы</title>
</head>
<body>
<table border=»1″ cellpadding=»3″ cellspacing=»0″ summary=»Энергетическая ценность продуктов питания»>
<tr>
<th>Продукт</th><th>Белки</th><th>Жиры</th><th>Углеводы</th><th>ккал</th>
</tr>
<tr>
<th>Хлеб ржаной</th><td>4,7</td><td>0,7</td><td>49,8</td><td>214</td>
</tr>
<tr>
<th>Молоко</th><td>2,8</td><td>3,2</td><td>4,7</td><td>58</td>
</tr>
<tr>
<th>Картофель</th><td>2</td><td>0,1</td><td>19,7</td><td>83</td>
</tr>
<tr>
<th>Свинина</th><td>11,4</td><td>49,3</td><td>9</td><td>489</td>
</tr>
<tr>
<th>Итого:</th><td>20,9</td><td>53,3</td><td>83,2</td><td>844</td>
</tr>
</table>
</body>
</html>

Знакомимся с тегами: <thead>, <tbody> и <tfoot>. Данные теги являют собой емкость для строк таблицы (тег <tr>) позволяя тем самым группировать и логически ими управлять.

Так:

  • Тег <thead> — (От Англ. table head — «голова» таблицы) Предназначен для группировки одной или нескольких верхних строк в таблице, делая тем самым «шапку» таблицы.
  • Тег <tbody> — (От Англ. table body — «тело» таблицы), Как правило этим тегом группируют центральные строки в таблице с основным содержанием.
  • Тег <tfoot> — (От Англ. table footer — нижний колонтитул таблицы) Определяет «подвал» таблицы, состоящий из одной или нескольких нижних строк.

Следует отметить несколько правил использования данных тегов:

Данные теги могут быть расположены только внутри таблицы — контейнера <table>.

Теги <thead> и <tfoot> допускается использовать только один раз для одной таблицы, на тег <tbody> данное правило не распространяется.

Структура таблицы при использовании всех трёх данных тегов должна выглядеть вот так:

<table>
<thead>
<tr>
<td>голова</td>
</tr>
</thead>
<tbody>
<tr>
<td> тело</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>подвал</td>
</tr>
</tfoot>
</table>

То есть сверху всегда должен быть контейнер <thead> потом <tbody> и <tfoot>, данные теги не могут пересекаться и быть вложенными друг в друга. А вот тег <tfoot> можно поменять местами с <tbody>, и что примечательно строки взятые в данный тег всё равно браузерами будут отображаться внизу таблицы.

К данным тегам допускается применять атрибуты выравнивания текста в ячейках align и valign, указывать цвет фона строк взятых в группу с помощью bgcolor, делать всплывающую подсказку с помощью title, однако на практике работать во всех браузерах будет только align и title.

Просто ради информации.. есть ещё атрибуты:

  • char — Выравнивание относительно заданного символа.
  • charoff — Смещение относительно указанного символа.

Но эти товарищи вообще не прижились ни в одном из известных браузеров! Толку с них как с козла молока.

Так зачем спросите Вы вообще нужны теги группирования строк если с помощью них практически ничего не сделать? Отвечу чуть ниже, а пока смотрим пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Группировка строк</title>
</head>
<body>
<table border=»1″ cellpadding=»3″ cellspacing=»0″>
<caption><b>Энергетическая ценность продуктов питания:</b></caption>
<thead bgcolor =»#deb887″ title=»Шапка»>
<tr>
<th>Продукт</th><th>Белки</th><th>Жиры</th><th>Углеводы</th><th>ккал</th>
</tr>
</thead>
<tbody align=»left» bgcolor =»#faebd7″ title=»Энергетическая ценность продуктов питания»>
<tr>
<th>Хлеб ржаной</th><td>4,7</td><td>0,7</td><td>49,8</td><td>214</td>
</tr>
<tr>
<th>Молоко</th><td>2,8</td><td>3,2</td><td>4,7</td><td>58</td>
</tr>
<tr>
<th>Картофель</th><td>2</td><td>0,1</td><td>19,7</td><td>83</td>
</tr>
<tr>
<th>Свинина</th><td>11,4</td><td>49,3</td><td>9</td><td>489</td>
</tr>
</tbody>
<tfoot align=»left» bgcolor =»#f5f5dc» title=»Итого:»>
<tr>
<th>Итого:</th><td>20,9</td><td>53,3</td><td>83,2</td><td>844</td>
</tr>
</tfoot>
</table>
</body>
</html>

Теперь отвечу, зачем вообще нужны <thead>, <tbody> и <tfoot>..

Основное предназначение данных тегов это логическая группировка строк в группы, а это в свою очередь облегчает работу с таблицей, например через стили или скрипты, теперь не нужно определять тот же стиль для каждой строчки, а достаточно указать его для всей группы.. Я сказал стиль? Ах да я же забыл, что Вы еще незнакомы с CSS..

Выходя за рамки темы данной главы, хочу отметить, что практически к любому тегу применим замечательный атрибут style, с помощью которого можно сделать практически все, что касается дизайна того или иного элемента.. А еще есть не менее замечательный тег <style> который внедряет в страницу стили CSS.. но это всё материал из другого учебника, поэтому здесь мы говорить об этом не будем.

Просто покажу пока что малопонятный для Вас пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Группировка строк и CSS</title>
<style type=»text/css»>
table {width: 600px; margin: 30px; border: #b8860b 6px ridge; border-collapse: collapse;}
td,th,tr {border: #b8860b 2px outset; padding: 3px;}
caption{font: italic bold 16px Arial; padding: 10px;}
thead {background-color: #deb887; text-align: center;}
tbody {background-color: #faebd7; text-align: left;}
tfoot {background-color: #f5f5dc; text-align: left; font: italic 14px Arial;}
tr:hover {background-color:#b8860b; color: #ffffff;}
</style>

</head>
<body>
<table>
<caption>Энергетическая ценность продуктов питания:</caption>
<thead title=»Шапка»>
<tr>
<th>Продукт</th><th>Белки</th><th>Жиры</th><th>Углеводы</th><th>ккал</th>
</tr>
</thead>
<tbody title=»Энергетическая ценность продуктов питания»>
<tr>
<th>Хлеб ржаной</th><td>4,7</td><td>0,7</td><td>49,8</td><td>214</td>
</tr>
<tr>
<th>Молоко</th><td>2,8</td><td>3,2</td><td>4,7</td><td>58</td>
</tr>
<tr>
<th>Картофель</th><td>2</td><td>0,1</td><td>19,7</td><td>83</td>
</tr>
<tr>
<th>Свинина</th><td>11,4</td><td>49,3</td><td>9</td><td>489</td>
</tr>
</tbody>
<tfoot title=»Итого:»>
<tr>
<th>Итого:</th><td>20,9</td><td>53,3</td><td>83,2</td><td>844</td>
</tr>
</tfoot>
</table>
</body>
</html>

Курсивом в данном примере выделено стилевое описание тегов написанное с помощью средств CSS.

Группировать можно не только строки, но и столбцы таблицы с помощью тегов <col> и/или <colgroup> данные теги позволяют определить основные параметры столбцов таблицы с помощью следующих атрибутов:

  • width — Ширина столбца в процентах или пикселях.
  • align — Выравнивает текст в ячейке:
    • left — по левому краю.
    • right — по правому краю.
    • center — по центру.
    • justify — по левому и правому краю.
  • valign — Выравнивает текст в ячейке по вертикали:
    • top — по верхнему краю.
    • middle — по центру.
    • bottom — по нижнему краю.
    • baseline — по базовой линии.
  • bgcolor — Цвет фона ячейки.
  • span — Количество столбцов, к которым следует применять параметры.

Давайте сгруппируем колонки нашей пробной таблицы про энергетическую ценность продуктов питания, она у нас состоит из пяти столбцов, значит, после тега <table> следует написать, что-то типа:

<col bgcolor=»#deb887″>
<col bgcolor=»#faebd7″>
<col bgcolor=»#faebd7″>
<col bgcolor=»#faebd7″>
<col bgcolor=»#f5f5dc»>

Для каждой колонки свой тег <col> с указанными параметрами, где первый тег это описание левой колонки таблицы. второй тег — группирует вторую колонку и далее по порядку..

Обратите внимание, что в нашей таблице вторая, третья и четвертая колонки имеют одинаковые параметры width=»100″ bgcolor=»#faebd7″ так вот чтобы не прописывать каждую одинаковую колонку отдельно можно воспользоваться атрибутом span, который указывает какое количество последующих колонок имеет идентичные параметры. В нашем случае запись приобретёт следующий вид:

<col bgcolor=»#deb887″>
<col span=»3″ bgcolor=»#faebd7″>
<col bgcolor=»#f5f5dc»>

Таким образом мы указали, что три колонки, начиная со второй, имеют одинаковую ширину и цвет фона. Представьте, если бы таких колонок было штук пятьдесят? как бы мы облегчили код.

Ну а вот собственно рабочий пример наших стараний:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Группировка столбцов</title>
</head>
<body>
<table border=»1″ cellpadding=»3″ cellspacing=»0″>
<caption><b>Энергетическая ценность продуктов питания:</b></caption>
<col bgcolor=»#deb887″>
<col span=»3″ bgcolor=»#faebd7″>
<col bgcolor=»#f5f5dc»>
<thead title=»Шапка»>
<tr>
<th>Продукт</th><th>Белки</th><th>Жиры</th><th>Углеводы</th><th>ккал</th>
</tr>
</thead>
<tbody align=»left» title=»Энергетическая ценность продуктов питания»>
<tr>
<th>Хлеб ржаной</th><td>4,7</td><td>0,7</td><td>49,8</td><td>214</td>
</tr>
<tr>
<th>Молоко</th><td>2,8</td><td>3,2</td><td>4,7</td><td>58</td>
</tr>
<tr>
<th>Картофель</th><td>2</td><td>0,1</td><td>19,7</td><td>83</td>
</tr>
<tr>
<th>Свинина</th><td>11,4</td><td>49,3</td><td>9</td><td>489</td>
</tr>
</tbody>
<tfoot align=»left» title=»Итого:»>
<tr>
<th>Итого:</th><td>20,9</td><td>53,3</td><td>83,2</td><td>844</td>
</tr>
</tfoot>
</table>
</body>
</html>

Тег <colgroup> практически идентичен тегу <col> и имеет точно такие же атрибуты, так наш выше изложенный пример мог бы иметь такой вид:

<colgroup bgcolor=»#deb887″>
<colgroup span=»3″ bgcolor=»#faebd7″>
<colgroup bgcolor=»#f5f5dc»>

Никакой заметной разницы мы бы не увидели. Однако, некоторые отличия всё же есть.. Во-первых, <colgroup> может служить емкостью тля тегов <col>, конструкция такая:

<colgroup>
<col>
</colgroup>

Во-вторых, если бы мы к тегу <table> применили атрибут rules со значением groups (об этом атрибуте речь пойдёт ниже) эффект будет достигнут только при использовании <colgroup>.

Больше никакой разницы между этими тегами нет.

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>colgroup</title>
</head>
<body>
<table border=»1″>
<colgroup bgcolor=»#deb887″ align=»left»>
<col span=»3″>
</colgroup>
<colgroup bgcolor=»#faebd7″ align=»center»>
<col span=»2″>
<col>
</colgroup>
<colgroup bgcolor=»#f5f5dc» align=»right»>
<col>
<col>
<col>
</colgroup>
<tr>
<td>20</td><td>20</td><td>20</td><td>40</td><td>40</td><td>60</td><td>20</td><td>30</td><td>50</td>
</tr>
<tr>
<td>20</td><td>20</td><td>20</td><td>40</td><td>40</td><td>60</td><td>20</td><td>30</td><td>50</td>
</tr>
<tr>
<td>20</td><td>20</td><td>20</td><td>40</td><td>40</td><td>60</td><td>20</td><td>30</td><td>50</td>
</tr>
<tr>
<td>20</td><td>20</td><td>20</td><td>40</td><td>40</td><td>60</td><td>20</td><td>30</td><td>50</td>
</tr>
</table>
</body>
</html>

Обратите внимание, что в этом примере колонки таблицы поделены на три группы с помощью <colgroup>, в этих группах мы указали цвет фона и способ выравнивания, а ширину колонок мы задаём с помощью тегов <col>, которые находятся внутри контейнеров <colgroup>.

Как и в случае с группировкой строк, колонки группируются с основной целью дальнейшего воздействия на них через стили или скрипты.

Ранее в главе «Таблицы» мы с Вами познакомились с атрибутами border — ширина границы и bordercolor — цвет границы, но это не весь набор инструментов применимых к границам таблицы.. Есть ещё два атрибута: frame и rules о них мы и поговорим ниже.

Начнём с атрибута frame — рамка, данный атрибут применяется к тегу <table> и указывает на то, как следует отображать внешние границы таблицы, то есть вокруг самой таблицы, а не между её отдельными ячейками

Атрибут frame может принимать следующие значения:

  • void — не отображать границы вокруг таблицы.
  • border — отображать границы вокруг таблицы (по умолчанию).
  • hsides — отображать только горизонтальные границы сверху и снизу.
  • vsides — отображать только вертикальные границы слева и справа.
  • above — отображать только верхнюю границу таблицы.
  • below — отображать только нижнюю границу таблицы.
  • lhs — отображать только левую границу.
  • rhs — отображать только правую границу.

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>frame</title>
</head>
<body>
<table border=»8″ frame=»hsides» cellpadding=»3″ cellspacing=»0″>
<caption><b>Энергетическая ценность продуктов питания:</b></caption>
<thead bgcolor =»#deb887″ title=»Шапка»>
<tr>
<th>Продукт</th><th>Белки</th><th>Жиры</th><th>Углеводы</th><th>ккал</th>
</tr>
</thead>
<tbody align=»left» bgcolor =»#faebd7″ title=»Энергетическая ценность продуктов питания»>
<tr>
<th>Хлеб ржаной</th><td>4,7</td><td>0,7</td><td>49,8</td><td>214</td>
</tr>
<tr>
<th>Молоко</th><td>2,8</td><td>3,2</td><td>4,7</td><td>58</td>
</tr>
<tr>
<th>Картофель</th><td>2</td><td>0,1</td><td>19,7</td><td>83</td>
</tr>
<tr>
<th>Свинина</th><td>11,4</td><td>49,3</td><td>9</td><td>489</td>
</tr>
</tbody>
<tfoot align=»left» bgcolor =»#f5f5dc» title=»Итого:»>
<tr>
<th>Итого:</th><td>20,9</td><td>53,3</td><td>83,2</td><td>844</td>
</tr>
</tfoot>
</table>
</body>
</html>

А вот атрибут rules в отличие от frame наоборот указывает на то, как следует рисовать границы между ячейками таблицы.

Атрибут rules может принимать следующие значения:

  • all — отображать все границы между ячейками.
  • none — не отображать границы между ячейками.
  • rows — отображать границы только между строками.
  • cols — отображать границы только между стобцами.
  • groups — отображать границы только между группами строк и группами столбцов образованными с помощью тегов: <thead>, <tbody>, <tfoot> и <colgroup>.

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>rules</title>
</head>
<body>
<table border=»1″ rules=»groups» cellpadding=»3″ cellspacing=»0″>
<caption><b>Энергетическая ценность продуктов питания:</b></caption>
<thead bgcolor =»#deb887″ title=»Шапка»>
<tr>
<th>Продукт</th><th>Белки</th><th>Жиры</th><th>Углеводы</th><th>ккал</th>
</tr>
</thead>
<tbody align=»left» bgcolor =»#faebd7″ title=»Энергетическая ценность продуктов питания»>
<tr>
<th>Хлеб ржаной</th><td>4,7</td><td>0,7</td><td>49,8</td><td>214</td>
</tr>
<tr>
<th>Молоко</th><td>2,8</td><td>3,2</td><td>4,7</td><td>58</td>
</tr>
<tr>
<th>Картофель</th><td>2</td><td>0,1</td><td>19,7</td><td>83</td>
</tr>
<tr>
<th>Свинина</th><td>11,4</td><td>49,3</td><td>9</td><td>489</td>
</tr>
</tbody>
<tfoot align=»left» bgcolor =»#f5f5dc» title=»Итого:»>
<tr>
<th>Итого:</th><td>20,9</td><td>53,3</td><td>83,2</td><td>844</td>
</tr>
</tfoot>
</table>
</body>
</html>

Атрибут rules напрочь игнорирует браузер Opera, но как я уже не раз намекал такие проблемы можно решить с помощью средств CSS.

  • Тег <col> помимо своей прямой задачи, решает еще одну полезную штуку..
    При загрузке таблицы браузеры не показывают её содержание до тех пор пока таблица полностью не загрузилась. Так вот при использовании тега <col>, браузер зная количество и будущие размеры колонок, сразу начинает показывать содержание, не дожидаясь полной загрузки.. что есть гуд! особенно при медленном соединении Интернета. Сайты свёрстанные табличным способом перестают «плясать» во время загрузки.

  • По наблюдениям, на тег <th> обращают внимание поисковые системы, и слова в заголовке таблицы имеют больший «вес», в глазах поисковиков, нежели чем текст в обычных ячейках, что в свою очередь может повлиять на результаты выдачи по тому или иному поисковому запросу.

  • Всё что написано в этой главе, по большей своей части, ориентированно на логику таблиц, что облегчает жизнь всем!:
    — Веб-мастерам, для более простого управления таблицей через стили или скрипты.
    — Браузерам, и речевым браузерам для более корректного отображения или чтения таблиц.
    — Алгоритмам поисковых систем, которые стараются найти эту самую логику на той или иной странице, чтобы выдать пользователю наиболее релевантные результаты.

    Так что не стоит пренебрегать тегами: <thead>, <tbody>, <tfoot>, <th>, <col>, <caption>, <colgroup> — они весьма полезны!



Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *