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

Leave a Comment / Html / By /

Содержание

Тег | HTML справочник

HTML теги

Значение и применение

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

Чтобы понять, как составить таблицу, давайте рассмотрим ее простейший вариант:

Основное содержимое таблицы заключается в тег <table>..</table>.

Каждая строка таблицы помещается в элемент <tr>…</tr>.

Ячейка заголовка таблицы помещается в элемент <th>…</th> (при этом содержимое отображается жирным начертанием и выравнивается по центру).

Каждая ячейка данных таблицы помещается в элемент <td>…</td>.

Наименование таблицы, если оно требуется размещается внутри элемента <caption>…</caption>(необязательный элемент). Обращаю Ваше внимание, что если Вы планируете использовать данный элемент в своей таблице, то он должен следовать в документе сразу за элементом <table>. По умолчанию наименование таблицы размещается по центру вверху таблицы (расположение заголовка таблицы возможно изменить, используя CSS свойство caption-side).

Поддержка браузерами

Атрибуты

АтрибутЗначениеОписание
alignleft
right
center
Не поддерживается в HTML5.
Определяет выравнивание таблицы в соответствии с окружающим её текстом.
bgcolorrgb(x,x,x)
#xxxxxx
colorname		Не поддерживается в HTML5.
Задает цвет фона для таблицы.
border0
1		Атрибут определяет должна отображаться граница вокруг ячеек таблицы, или нет.
cellpaddingpixelsНе поддерживается в HTML5.
Определяет расстояние между границей ячейки и ее содержимым.
cellspacingpixelsНе поддерживается в HTML5.
Указывает расстояние между ячейками.
frameabove
below
hsides
lhs
rhs
vsides
box
border
void		Не поддерживается в HTML5.
Указывает, какие части внешних границ, должны быть видны.
rulesnone
groups
rows
cols
all		Не поддерживается в HTML5.
Указывает, какие части внутри границ должны быть видны.
sortablesortableАтрибут отсутствует в спецификации HTML 5.1.
Указывает, что данные в таблице могут быть отсортированы. Это логический атрибут.
summarytextНе поддерживается в HTML5.
Вертикальное выравнивание содержимого в ячейке заголовка.
widthpixels
%		Не поддерживается в HTML5.
Определяет ширину таблицы.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Пример использования элемента <table></title>
</head>
<body>
	<table border = "1"> <!--начало содержимого таблицы-->
		<caption>Элементарная таблица</caption> <!-- наименование таблицы-->
		<tr> <!--описываем первую строку-->
			<th>Ячейка заголовка 1</th>
			<th>Ячейка заголовка 2</th> 
			<th>Ячейка заголовка 3</th>
		</tr> 
		<tr> <!--описываем вторую строку-->
			<td>Ячейка данных 1 Строка 2</td>
			<td>Ячейка данных 2 Строка 2</td>
			<td>Ячейка данных 3 Строка 2</td>
		</tr>
		<tr> <!-- описываем третью строку-->
			<td>Ячейка данных 1 Строка 3</td>
			<td>Ячейка данных 2 Строка 3</td>
			<td>Ячейка данных 3 Строка 3</td>
		</tr>
	</table> <!-- конец таблицы-->
</body>
</html>

К данной таблице для наглядности мы добавили атрибут border (граница) со значением «1», которое определяет, что граница должна отображаться вокруг ячеек таблицы. Атрибут граница практически не используется в HTML, в данном случае использование CSS было бы предпочтительнее и давало бы более гибкие возможности.

Результат нашего примера:

Пример таблицы, составленной на HTML.

Объединение столбцов

Объединение столбцов в элементах <td> или <th> допускается производить с помощью атрибута colspan (при этом ячейка растягивается вправо на заданное количество ячеек).

<!DOCTYPE html>
<html>
<head>
<title>Пример объединения столбцов в таблицах</title>
</head>
<body>
	<table border = "1"> <!--начало содержимого таблицы-->
		<caption>Элементарная таблица</caption>  <!--наименование таблицы-->
		<tr> <!--описываем первую строку-->
			<th colspan = "2">Ячейка заголовка 1</th> <!--растягиваем на 2 ячейки-->
			<th>Ячейка заголовка 2</th> 
		</tr> 
		<tr> <!--описываем вторую строку-->
			<td>Ячейка данных 1 Строка 2</td>
			<td>Ячейка данных 2 Строка 2</td>
			<td>Ячейка данных 3 Строка 2</td>
		</tr>
		<tr> <!--описываем третью строку-->
			<td>Ячейка данных 1 Строка 3</td>
			<td>Ячейка данных 2 Строка 3</td>
			<td>Ячейка данных 3 Строка 3</td>
		</tr>
	</table> <!--конец таблицы-->
</body>
</html>

Результат нашего примера:

Пример таблицы с объединёнными столбцами на HTML.

Объединение строк

Объединение строк в элементах <td> или <th> допускается с помощью атрибута rowspan (диапазон ячеек задается сверху вниз и охватывает несколько строк – ячейка растягивается вниз).

<!DOCTYPE html>
<html>
<head>
<title>Пример объединения строк в таблицах</title>
</head>
<body>
	<table border = "1"> <!-- начало содержимого таблицы-->
		<caption>Элементарная таблица</caption> <!--наименование таблицы-->
		<tr> <!--описываем первую строку-->
			<th colspan = "2">Ячейка заголовка 1</th><!--растягиваем на 2 ячейки-->
			<th>Ячейка заголовка 2</th>
		</tr>
		<tr><!--описываем вторую строку-->
			<td rowspan = "2">Ячейка данных 1 Строка 2</td>
			<td>Ячейка данных 2 Строка 2</td>
			<td>Ячейка данных 2 Строка 3</td>
		</tr>
		<tr> <!--описываем третью строку (первая ячейка занята предыдущей строкой) -->
			<td>Ячейка данных 2 Строка 3</td>
			<td>Ячейка данных 3 Строка 3</td>
		</tr>
	</table> <!--конец таблицы-->
</body>
</html>

Результат нашего примера:

Пример таблицы с объединёнными столбцами и строками на HTML.

Отличия HTML 4.01 от HTML 5

В HTML 5 была прекращена поддержка 8 атрибутов и одного в 5.1.

Значение CSS по умолчанию

table
 
 
 {
display : table;
border-collapse : separate;
border-spacing : 2px;
border-color : gray;
}

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

Атрибуты событий

Элемент поддерживает «атрибуты событий».

HTML теги

| HTML | WebReference

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица размеров обуви</title>
 </head>
 <body>
  <table>
   <caption>Таблица размеров обуви</caption>
   <tr>
    <th>Россия</th>
    <th>Великобритания</th>
    <th>Европа</th>
    <th>Длина ступни, см</th>
   </tr>
   <tr><td>34,5</td><td>3,5</td><td>36</td><td>23</td></tr>
   <tr><td>35,5</td><td>4</td><td>36⅔</td><td>23–23,5</td></tr>
   <tr><td>36</td><td>4,5</td><td>37⅓</td><td>23,5</td></tr>
   <tr><td>36,5</td><td>5</td><td>38</td><td>24</td></tr>
   <tr><td>37</td><td>5,5</td><td>38⅔</td><td>24,5</td></tr>
   <tr><td>38</td><td>6</td><td>39⅓</td><td>25</td></tr>
   <tr><td>38,5</td><td>6,5</td><td>40</td><td>25,5</td></tr>
   <tr><td>39</td><td>7</td><td>40⅔</td><td>25,5–26</td></tr>
   <tr><td>40</td><td>7,5</td><td>41⅓</td><td>26</td></tr>
   <tr><td>40,5</td><td>8</td><td>42</td><td>26,5</td></tr>
   <tr><td>41</td><td>8,5</td><td>42⅔</td><td>27</td></tr>
   <tr><td>42</td><td>9</td><td>43⅓</td><td>27,5</td></tr>
   <tr><td>43</td><td>9,5</td><td>44</td><td>28</td></tr>
   <tr><td>43,5</td><td>10</td><td>44⅔</td><td>28–28,5</td></tr>
   <tr><td>44</td><td>10,5</td><td>45⅓</td><td>28,5–29</td></tr>
   <tr><td>44,5</td><td>11</td><td>46</td><td>29</td></tr>
   <tr><td>45</td><td>11,5</td><td>46⅔</td><td>29,5</td></tr>
   <tr><td>46</td><td>12</td><td>47⅓</td><td>30</td></tr>
   <tr><td>46,5</td><td>12,5</td><td>48</td><td>30,5</td></tr>
   <tr><td>47</td><td>13</td><td>48⅔</td><td>31</td></tr>
   <tr><td>48</td><td>13,5</td><td>49⅓</td><td>31,5</td></tr>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 1.

Вид таблицы

Рис. 1. Вид таблицы

Тег HTML таблица — справочник GuruWeba

Тег <table> используется для создания HTML таблиц.

HTML таблица <table> должна содержать хотя бы одну строку <tr> и хотя бы одну ячейку <th> — ячейку-заголовок или <td> — обычную ячейку в каждой строке.

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

К таблице можно добавить подпись, используя тег <caption>.

Внутри таблицу <table> можно делить не только по строкам, но и по колонкам используя теги <col> и <colgroup>.

HTML таблицы <table> не стоит использовать для верстки каркаса HTML страниц. Используйте их для структурированного отображения контента табличного формата.

Подробнее про создание таблиц читайте в статье: Создание таблиц в HTML. Все о HTML таблицах.

Синтаксис

<table>HTML контент таблицы</table>

Примеры использования таблиц <table> в HTML коде

Ниже представлены 2 варианта HTML таблиц.

Простая HTML таблица

Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4

HTML код простой таблицы

<table>
<tbody>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</tbody>
</table>

Сложная HTML таблица

Подпись таблицы
Ячейка колонтитула 1 Ячейка колонтитула 2 Ячейка колонтитула 3
Ячейка колонтитула 4 Ячейка колонтитула 5 Ячейка колонтитула 6
Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4

HTML код сложной таблицы

<table>
<caption>Подпись таблицы</caption>
<colgroup>
<col>
<col>
</colgroup>
<thead>
<tr>
<th>Ячейка колонтитула 1</th>
<th>Ячейка колонтитула 2</th>
<th>Ячейка колонтитула 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Ячейка колонтитула 4</th>
<th>Ячейка колонтитула 5</th>
<th>Ячейка колонтитула 6</th>
</tr>
</tfoot>
<tbody>
<tr>
<td rowspan="2">Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
</tr>
<tr>
<td colspan="2">Ячейка 4</td>
</tr>
</tbody>
</table>

Поддержка браузерами

Атрибуты

В HTML5 тег <table> не имеет атрибутов.

Устаревшие атрибуты тега table

Атрибут Значения Описание
align left
right
center
justify		 Задает правило выравнивания содержимого таблицы по горизонтали. В HTML5 используйте CSS.
bgcolor rgb
HTML hex
HTML colorname

Фоновый цвет. В HTML5 используйте CSS.

Примеры:
RGB: rgb(226,112,017), rgb(0, 40, 129).
HTML hex: #1a2a2c, #eee.
HTML colorname: black, yellow;
border число Ширина границ таблицы в пикселях. По умолчанию: 0 — границы не выводятся.
В HTML5 используйте CSS.
cellpadding число Отступ от границ ячеек до их содержимого. Значение указывает количество пикселей. В HTML5 используйте CSS.
cellspacing число Отступ между границами ячеек. Значение указывает количество пикселей. В HTML5 используйте CSS.
frame void
above
below
lhs
rhs
vsides
hsides
box
border

Определяет какие внешние границы будут отображены:
void — все границы скрыты;
above — только верхняя граница;
below — только нижняя граница;
lhs — только левая граница;
rhs — только правая граница;
vsides — вертикальные границы;
hsides — горизонтальные границы;
box или border — все границы.

В HTML5 используйте CSS.
rules none
groups
rows
cols
all

Определяет какие внутренние границы будут отображены:
none — все скрыты;
groups — границы групп;
rows — границы строк;
cols — границы колонок;
all — все;

В HTML5 используйте CSS.
summary текст Описание таблицы.
width пиксели
проценты		 Ширина таблицы. В HTML5 используйте CSS.

Table — HTML тег таблицы

html таблицы

Доброго времени уважаемые подписчики!

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

В WEB таблицы — это не только какие-то отчетные данные, не только расписание или еще что-нибудь в этом стиле. В WEB таблицей можно задать целую структуру сайта.

html таблицы

Сколько вы таких страниц видели в Internet?

Тысячи и тысячи. Но если разобраться, то это вот такая таблица.

html таблицы

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Спросите вы, а как располагаются элементы на странице, ровно? А они заключаются в свои таблицы и выравниваются нужным образом.

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

HTML-тегом таблицы является тег table, строкой таблицы является тег tr, а столбцом таблицы — тег td.

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

Давайте рассмотрим пример, и вы сразу все поймете.

Сделаем такую таблицу:

html таблицы

Сделаем это следующим образом:

Ставим тег <table> и начинаем формировать первую строку, пишем:

<tr> <td>Ячейка 1 строка 1</td> <td>Ячейка 2 строка 1</td> <td>Ячейка 3 строка 1</td> </tr>

<tr>

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

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

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

  </tr>

У нас получилась первая строка таблицы с тремя столбцами. Аналогично формируем вторую строку:

<tr> <td>Ячейка 1 строка 2</td> <td>Ячейка 2 строка 2</td> <td>Ячейка 3 строка 2</td> </tr>

<tr>

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

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

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

  </tr>

И третью:

<tr> <td>Ячейка 1 строка 3</td> <td>Ячейка 2 строка 3</td> <td>Ячейка 3 строка 3</td> </tr>

<tr>

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

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

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

  </tr>

Наши три строки сформированы, осталось закрыть тег </table>.

Наша таблица готова.

Если таблице нужно дать заголовок, то за это отвечает тег <caption> Заголовок таблицы </caption> .

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

В принципе заголовок можно сделать, поставив тег <h4> Заголовок таблицы </h4>перед тегом <table>.

Если столбцу нужно дать заголовок, то для этого предусмотрен тег <th> Заголовок столбца </th>.

Тег <th> — то же что и тэг <td>, но его содержимое отображается полужирным шрифтом с выравниванием по центру, а содержимое <td>, как вы уже увидели, с выравниванием по левому краю, со шрифтом по умолчанию.

С тегами, касающихся таблиц, пожалуй, все.

Теперь рассмотрим параметры этих тегов.

Тег <table> имеет следующие параметры:

width=число — ширина таблицы в пикселях или в % относительно ширины окна браузера.

height=число — высота таблицы в пикселях или в % относительно ширины окна браузера (высота обычно рассчитывается автоматически, поэтому менять ее не рекомендую).

align = left — выравнивание таблицы по левому краю.

right — выравнивание таблицы по правому краю.

center — выравнивание таблицы по центру.

border= число — толщина рамки таблицы в пикселях.

cellspacing=число — расстояние между смежными ячейками в пикселях (по умолчанию = 2).

cellpadding=число — расстояние между содержимым ячейки и ее границей в пикселях (по умолчанию =1).

bgcolor= цвет — фоновый цвет таблицы.

background=url — фоновое изображение для таблицы.

bordercolor=цвет — цвет всех линий рамки таблицы.

Рассмотрим параметры тегов <tr>, <td>, <th>:

width=число — ширина ячейки в пикселях или в % относительно ширины окна браузера (для <tr>не применяется).

height=число — высота ячейки в пикселях или в % относительно ширины окна браузера (для <tr> не применяется).

(высота обычно рассчитывается автоматически, поэтому менять ее не рекомендую).

html таблицы

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

align = left — выравнивание в ячейке по левому краю.

right — выравнивание в ячейке по правому краю.

center — выравнивание в ячейке по центру.

valign — вертикальное выравнивание содержимого ячейки.

top — выравнивание по верхнему краю ячейки.

bottom — выравнивание по нижнему краю ячейки.

middle — выравнивание по середине ячейки.

bgcolor= цве — фоновый цвет ячейки.

background=url — фоновое изображение для ячейки.

bordercolor=цвет — цвет всех линий рамки ячейки.

colspan=число — количество объединяемых ячеек по столбцам (для <tr> не применяется).

rowspan=число— количество объединяемых ячеек по строкам (для<tr> не применяется).

Давайте подробнее остановимся на параметрах colspan и rowspan.

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

html таблицы

Для этого нам понадобятся параметры тега <td> colspan и rowspan..

Итак:

<table border=»1″ cellspacing=»0″ cellpadding=»0″>

<table border=»1″ cellspacing=»0″ cellpadding=»0″>

Формируем первую строку: так как в первой строке у нас одна ячейка, и она объединяет три ячейки второй строки, то для одной ячейки первой строки укажем параметр colspan=3.

<tr> <td colspan=»3″ align=»center»>1</td> </tr>

<tr>

    <td colspan=»3″ align=»center»>1</td>

  </tr>

Вторая строка это просто три ячейки:

<tr> <td align=»center»>2</td> <td align=»center»>3</td> <td align=»center»>4</td> </tr>

     <tr>

  <td align=»center»>2</td>

  <td align=»center»>3</td>

  <td align=»center»>4</td>

</tr>

Третья строка: пятая ячейка третьей строки объединяет две ячейки второй строки ( 2 и 3) и две строки (третью и четвертую).

Поэтому для нее зададим colspan=2 и rowspan=2. Ячейка № 6 остается.

<tr> <td colspan=»2″ rowspan=»2″ align=»center»>5</td> <td align=»center»>6</td> </tr>

  <tr>

  <td colspan=»2″ rowspan=»2″ align=»center»>5</td>

  <td align=»center»>6</td>

</tr>

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

<tr> <td align=»center»>7</td> </tr> </table>

  <tr>

    <td align=»center»>7</td>

  </tr>

</table>

Наша таблица построена.

Роль таблиц в WEB очень велика, поэтому рекомендую разобраться с построением таблиц.

Поупражняться можно на примерах.

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

Ссылка на файл Архив 5 урока

Упражнение:

Таблица 1.

html таблицы

Таблица 2.

html таблицы

На сегодня, выпуск посвящённый HTML-тегам таблицы, я заканчиваю.

Если есть вопросы пишите на E-mail: [email protected]

Проект webformyself.com — основы самостоятельного сайтостроения

С уважением, Андрей Бернацкий.

html таблицы

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее html таблицы

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Тег HTML ячейка таблицы

Тег <td> определяет обычную ячейку в HTML таблице. Используется в HTML таблицах определенных тегом <table>.

В HTML таблицах существует 2 типа ячеек: обычные и ячейки-заголовки. Тег <td> указывает на обычные ячейки таблицы HTML. Для определения ячейки-заголовка используйте тег <th>.

HTML тег ячейки <td> ставится внутри тега <tr> — строки таблицы.

Подробнее про создание таблиц читайте в статье: Создание таблиц в HTML. Все о HTML таблицах.

Синтаксис

<td>контент ячейки</td>

Отображение в браузере

Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4

Пример использования <td> в HTML коде

<!DOCTYPE html>
<html>
<head>
<title>Простая таблица на 4 ячейки</title>
</head>
<body>
<table>
<tbody>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</tbody>
</table>
</body>
</html>

Поддержка браузерами

Атрибуты

Атрибут Значения Описание
colspan число Количество ячеек по горизонтали, которые должны быть объединены.
headers id_заголовка Указывает заголовок, к которому относится ячейка.
rowspan число Количество ячеек по вертикали, которые должны быть объединены.
Устаревшие атрибуты
abbr текст Короткая версия содержимого ячейки.
align left
right
center
justify		 Задает правило выравнивания содержимого ячейки по горизонтали. В HTML5 используйте CSS.
axis имя_категории Используется для категоризации ячеек. Задает категорию, к которой принадлежит ячейка. В HTML5 используйте классы CSS.
bgcolor rgb
HTML hex
HTML colorname

Фоновый цвет. В HTML5 используйте CSS.

Примеры:
RGB: rgb(236,123,050), rgb(0, 20, 187).
HTML hex: #faf3e1, #ccc.
HTML colorname: white, green;
height пиксели
проценты		 Высота ячейки. В HTML5 используйте CSS.
nowrap пусто / nowrap Логический атрибут. Устанавливает запрет переноса в тексте ячейки. В HTML5 используйте CSS.
scope col
colgroup
row
rowgroup		 Устанавливает ячейку как заголовок для:
col — колонки; colgroup — группу колонок; row — ряда; rowgroup — группы рядов.
valign top
middle
bottom
baseline		 Задает правило выравнивания содержимого ячейки по вертикали. В HTML5 используйте CSS.
width пиксели
проценты		 Ширина ячейки. В HTML5 используйте CSS.

Работа с HTML таблицами для новичков

Начиная с этого урока, я больше не буду приводить структуру всей страницы, считайте, что мы всегда работаем внутри тега body.

Блок . Структура простейшей таблицы

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

В 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

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

Кроме тегов td существуют также теги <th>, которые также создают ячейки. Но это уже будут не обычные ячейки, а ячейки-заголовки, которые указывают, что находится в данном столбце (или строке) таблицы.

В следующем примере ячейки «Иван» и «Николай» должны быть обычными ячейками td, а ячейка «Имя» по логике должна быть ячейкой-заголовком th, так как «Имя» — это общее название содержимого этого столбца:

<table border="1">
	<tr>
		<th>Имя</th>
		<th>Фамилия</th>
		<th>Зарплата</th>
	</tr>
	<tr>
		<td>Иван</td>
		<td>Иванов</td>
		<td>200$</td>
	</tr>
	<tr>
		<td>Николай</td>
		<td>Сидоров</td>
		<td>1000$</td>
	</tr>
</table>

Так код будет выглядеть в браузере:

ИмяФамилияЗарплата
ИванИванов200$
НиколайСидоров1000$

По умолчанию текст в ячейках th будет жирный и расположен по центру (это поведение можно поменять, но об этом позже).

Блок . Атрибут cellspacing

Вы обратили внимание на то, что между ячейками есть некоторое расстояние, из-за которого видно то, что каждая ячейка имеет свою границу? Это расстояние регулируется атрибутом cellspacing. При этом, если мы не напишем этот атрибут, то его значение будет совсем не ноль (в этом случае все ячейки слиплись бы друг с другом). То есть, атрибут cellspacing по умолчанию имеет некоторое ненулевое значение, из-за которого ячейки не слипаются (это расстояние равно нескольким пикселям).

Давайте посмотрим на примере. Сейчас я увеличу отступ между ячейками до 10 пикселей:

<table border="1" cellspacing="10">
	<tr>
		<th>Имя</th>
		<th>Фамилия</th>
		<th>Зарплата</th>
	</tr>
	<tr>
		<td>Иван</td>
		<td>Иванов</td>
		<td>200$</td>
	</tr>
	<tr>
		<td>Николай</td>
		<td>Сидоров</td>
		<td>1000$</td>
	</tr>
</table>

Так код будет выглядеть в браузере:

ИмяФамилияЗарплата
ИванИванов200$
НиколайСидоров1000$

То, что cellspacing имеет некоторое значение по умолчанию, зачастую может мешать вам. В этом случае следует просто поставить его в ноль.

В HTML5 этот атрибут считается устаревшим (но он по-прежнему придает отступ по умолчанию). Вместо него следует использовать специальное CSS свойство, о котором мы поговорим попозже.

Если вы думаете, что вам не стоит изучать этот атрибут из-за того, что он устарел — вы ошибаетесь. В мире гораздо больше сайтов, сделанных не на HTML5, и в них вы можете столкнуться с этим атрибутом (и некоторыми другими устаревшими, которые мы будем проходить). В этом случае вам нужно знать, что это такое и как с ним работать.

Блок . Атрибут cellpadding

Атрибут cellpadding задает отступ между текстом и границей ячейки. В следующем примере я поставлю значение этого атрибута в 20px и теперь текст отойдет от границы ячеек:

<table border="1" cellpadding="20">
	<tr>
		<th>Имя</th>
		<th>Фамилия</th>
		<th>Зарплата</th>
	</tr>
	<tr>
		<td>Иван</td>
		<td>Иванов</td>
		<td>200$</td>
	</tr>
	<tr>
		<td>Николай</td>
		<td>Сидоров</td>
		<td>1000$</td>
	</tr>
</table>

Так код будет выглядеть в браузере:

ИмяФамилияЗарплата
ИванИванов200$
НиколайСидоров1000$

Для сравнения привожу то, как таблица будет выглядеть по умолчанию:

ИмяФамилияЗарплата
ИванИванов200$
НиколайСидоров1000$

Атрибут cellpadding также имеет некоторое значение по умолчанию. Если оно вам мешает — обнулите его.

Этот атрибут, так же, как и cellspacing, считается устаревшим в HTML5.

Блок . Обнуляем cellpadding и cellspacing

Давайте обнулим cellpadding и cellspacing и посмотрим, что станет с таблицей в этом случае:

<table border="1" cellpadding="0" cellspacing="0">
	<tr>
		<th>Имя</th>
		<th>Фамилия</th>
		<th>Зарплата</th>
	</tr>
	<tr>
		<td>Иван</td>
		<td>Иванов</td>
		<td>200$</td>
	</tr>
	<tr>
		<td>Николай</td>
		<td>Сидоров</td>
		<td>1000$</td>
	</tr>
</table>

Так код будет выглядеть в браузере:

ИмяФамилияЗарплата
ИванИванов200$
НиколайСидоров1000$

Как вы видите, в данном случае ячейки таблицы слиплись, однако все равно заметно, что каждая ячейка имеет свою границу (то есть границы сейчас двойные). Вы сможете поправить это, когда изучите язык CSS.

Блок . Добавляем ширину и высоту

Существуют также атрибуты width и height, которые позволяют задать таблице ширину и высоту таблицы соответственно (без этих атрибутов ширина и высота таблицы регулируются ее содержимым: много текста — ширина большая, мало текста — ширина маленькая).

Посмотрите на пример их применения:

<table border="1" cellpadding="0" cellspacing="0">
	<tr>
		<th>Имя</th>
		<th>Фамилия</th>
		<th>Зарплата</th>
	</tr>
	<tr>
		<td>Иван</td>
		<td>Иванов</td>
		<td>200$</td>
	</tr>
	<tr>
		<td>Николай</td>
		<td>Сидоров</td>
		<td>1000$</td>
	</tr>
</table>

Так код будет выглядеть в браузере:

ИмяФамилияЗарплата
ИванИванов200$
НиколайСидоров1000$

Значениями атрибутов могут выступать пиксели или проценты. Значения в процентах задаются таким образом: width=»30%» — в этом случае таблица займет 30% ширины родителя.

Что вам делать дальше:

Приступайте к решению задач по следующей ссылке: задачи к уроку.

Когда все решите — переходите к изучению новой темы.

Параметры таблицы table в html (свойства) | HTML

Параметры и свойства таблицы понадобятся вам для придания ей более приглядного вида. В html это указывается в теге <table>.

Рассмотрим основные параметры тега table:

 

Свойство Описание Значение Пример
width Ширина таблицы (можно задавать в пикселах или процентах)  n, n%  <table>
cellpadding Расстояние между ячейкой и ее содержимым(в пикселах)  n  <table cellpadding=»4″>
cellspacing Расстояние между ячейками(в пикселах)  n  <table cellspacing=»4″>
align Выравнивание таблицы  left,
right,
center		  <table align=»center»>
border Толщина рамки(в пикселах)  n  <table border=»2″>
background Определяет изображение, которое будет использоваться в качестве фонового рисунка таблицы.  url  <table background=»ссылка на изображение»>
bgcolor Цвет фона таблицы  #rrggbb  <table bgcolor=»#333333″>
cols Задает количество столбцов в таблице, в помощь браузеру при подготовке к ее отображению(практически никогда не указывается)  n  <table cols=»3″>
rules Определяет, где рисовать границы между ячейками  all,
groups,
cols, none,
rows		  <table rules=»cols»>
nowrap Запрещает переносы строк в тексте.    <table nowrap>
frame Задание типа рамки таблицы  void
above
below
lhs
rhs
hsides
vsides
box		  <table frame=»hsides»>

Обратите внимание:

  1. если не указана ширина — то это означает, что она выбирается браузером автоматически;
  2. по-умолчанию ширина подгоняется под содержимое самих ячеек!
  3. по-умолчанию таблица выводится без рамки — поэтому задайте ее в теге table как это показано на примерах выше(иногда требуется указать и цвет).

Теперь ваши таблицы должны выглядеть всегда красиво!

Почему данная таблица(в этой статье выглядит неприглядно) — узнайте подробно тут — как правильно создать таблицу для сайта

 

Смотрите также:

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

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

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