Таблицы | htmlbook.ru

Благодаря универсальности таблиц, большому числу параметров, управляющих их видом, таблицы надолго стали определенным стандартом для верстки веб-страниц. Таблица с невидимой границей представляет собой словно модульную сетку, в блоках которой удобно размещать элементы веб-страницы. Тем не менее, это не совсем правильный подход, ведь каждый объект HTML определен для своих собственных целей и если он используется не по назначению, причем повсеместно, это значит, что альтернатив нет. Так оно и было долгое время, пока на смену таблицам при верстке сайтов не пришли слои. Это не значит, что слои теперь используются сплошь и рядом, но тенденция уже наметилась четко — таблицы применяются для размещения табличных данных, а слои — для верстки и оформления.

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

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

Для добавления таблицы на веб-страницу используется тег <table>. Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются соответственно с помощью тегов <tr> и <td>. Таблица должна содержать хотя бы одну ячейку (пример 12.1). Допускается вместо тега <td> использовать тег <th>. Текст в ячейке, оформленной с помощью тега <th>, отображается браузером шрифтом жирного начертания и выравнивается по центру ячейки. В остальном, разницы между ячейками, созданными через теги <td> и <th> нет.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML  4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TABLE</title>
 </head>
 <body>
  <table border="1" cellpadding="5">
   <tr>
    <th>Ячейка 1</th>
    <th>Ячейка 2</th>
   </tr>
   <tr>
    <td>Ячейка 3</td>
    <td>Ячейка 4</td>
  </tr>
 </table>
 </body>
</html>

Порядок расположения ячеек и их вид показан на рис. 12.1.

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

htmlbook.ru

| 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. Вид таблицы

webref.ru

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 с нуля

Смотреть

webformyself.com

Тег 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.

guruweba.com

HTML5 | Таблицы

Таблицы

Последнее обновление: 08.04.2016

Для создания таблиц в html используется элемент table. Каждая таблица между тегами <table> и </table> содержит строки, который представлены элементом tr. А каждая строка между тегами <tr> и </tr> содержит ячейки в виде элементов td.

Создадим простейшую таблицу:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Таблицы в HTML5</title>
	</head>
	<body>
		<table>
			<tr>
				<td>Модель</td> <td>Компания</td> <td>Цена</td>
			</tr>
			<tr>
				<td>Nexus 6P</td> <td>Huawei</td> <td>49000</td>
			</tr>
			<tr>
				<td>iPhone 6S PLus</td> <td>Apple</td> <td>62000</td>
			</tr>
			<tr>
				<td>Lumia 950 XL</td> <td>Microsoft</td> <td>35000</td>
			</tr>
		</table>
	</body>
</html>

Здесь у нас в таблице 4 строки, и каждая строка имеет по три столбца.

При этом в данном случае первая строка выполняет роль заголовка, а остальные три строки собственно являются содержимым таблицы. Разделения заголовков, футера и тела таблицы в html предусмотрены соответственно элементы thead, tfoot и tbody. Для их применения изменим таблицу следующим образом:


<table>
	<caption><b>Популярные смартфоны 2015</b></caption>
	<thead>
		<tr>
			<th>Модель</th> <th>Компания</th> <th>Цена</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Nexus 6P</td> <td>Huawei</td> <td>49000</td>
		</tr>
		<tr>
			<td>iPhone 6S PLus</td> <td>Apple</td> <td>62000</td>
		</tr>
		<tr>
			<td>Lumia 950 XL</td> <td>Microsoft</td> <td>35000</td>
		</tr>
	<tbody>
	<tfoot>
		<tr>
			<th colspan="3">Информация по состоянию на 17 марта</th>
		</tr>
	</tfoot>
</table>

В элемент thead заключается строка заголовков. Для ячеек заголовок используется не элемент td, а th. Элемент th выделяет заголовок жирным. А все остальные строки заключаются в tbody

Элемент tfoot определяет подвал таблицы или футер. Здесь обычно выводится некоторая вспомогательная информация по отношению к таблице.

Кроме собственно заголовоков столбцов с помощью элемента caption мы можем задать общий заголовок для таблицы.

Также стоит отметить, что футер таблицы содержит только один столбец, который раздвигается по ширине трех столбцов с помощью атрибута colspan="3".

Атрибут colspan указывает на какое количество столбцов раздвигается данная ячейка. Также с помощью атрибута rowspan мы можем раздвигать ячейку на определенное количество строк. Например:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Таблицы в HTML5</title>
		<style>
			td{
				width: 60px; 
				height:60px; 
				border: solid 1px silver; 
				text-align:center;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td rowspan="2">1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				<td>4</td>
				<td>5</td>
			</tr>
			<tr>
				<td>6</td>
				<td colspan="2">7</td>
			</tr>
		</table>
	</body>
</html>

metanit.com

Урок 8. Таблицы в html

Таблица в html — один из основных и первых методов вёрстки web-страниц. До того, как CSS стал популярен, web-дизайнеры в основном использовали метод табличной вёрстки и получали очень хороший результат.
Таблица в html состоит из строк и ячеек в этих строках. Это не опечатка, не из строк и столбцов, а именно из строк и ячеек. Считывание информации по таблице в html идёт построчно.

Проще говоря смысл написанного кода такой:
Первая строка — 1-ая, 2-ая … ячейки, Вторая строка — 1-ая, 2-ая … ячейки, Третья строка… и так далее.


Теги, используемые для построения таблицы в html

table — обязательный тег, открывающий и закрывающий таблицу
caption — необязательный тег, обозначающий заголовок таблицы
th — необязательный тег, в открывающий и закрывающий теги которого вписывается название столбца. Как правило, выделяется жирным
tr — обязательный тег, с которого открывается и закрывается строка
td — обязательный тег, обозначающий открытие и закрытие ячейки в строке

Пример кода простой таблицы

<html>
   <head>
   <title>Таблица html</title>
   </head>
<body>

<table> <!-- обозначаем открытие таблицы -->

   <tr>  <!-- обозначаем начало первой строки -->
        <caption>Название таблицы</caption>
        <th>  <!-- обозначаем название первого столбца -->
            Стобец 1
        </th>  <!-- закрываем название первого столбца -->

        <th>  <!-- обозначаем название второго столбца -->
            Стобец 2
        </th>  <!-- закрываем название второго столбца -->

   </tr>  <!-- конец  первой строки -->

   <tr>  <!-- обозначаем начало второй строки -->
        <td>  <!-- обозначаем первую ячейку во второй строке -->
            Текст в первой ячейке
        </td>  <!-- закрываем первую ячейку во второй строке -->

        <td>  <!-- обозначаем вторую ячейку во второй строке -->
            Текст во второй ячейке
        </td>  <!-- закрываем вторую ячейку во второй строке -->
   </tr>  <!-- конец  второй строки -->

</table> <!-- закрываем таблицу -->

</body>
</html>


В браузере отобразится

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

Назначение таблиц в html


Урок по таблицам очень важен! Благодаря таблицам Вы можете расположить не только текст, но и изображения, ссылки и много другое. В таблице можно задавать фон (или его цвет), отступ, ширину, границу и другие параметры, что придаст ей красивый внешний вид. Таблица — Ваш первый шаг к понимаю web-дизайна! Ранее многие сайты были целиком свёрстаны как таблицы, то есть всё, что видел пользователь (боковое меню, верхнее меню, содержание) — было содержанием ячеек большой таблицы.
На этой ноте перейдём непосредственно к атрибутам, которые делают таблицу красивой…

Свойства и параметры html таблиц: отступ, ширина, цвет фона, граница (рамка)


У тега table есть следующие атрибуты:

width — ширина таблицы. может быть в пикселях или % от ширины экрана.
bgcolor — цвет фона ячеек таблицы
background — заливает фон таблицы рисунком
border — рамка и границы в таблице. Толщина указывается в пикселях
cellpadding — отступ в пикселях между содержимым ячейки и её внутренней границей
Как и ранее, значение атрибута прописываем в кавычках.

<table border="1" width="300"> <!-- Задаём границу в 1 пиксель и ширину в 300 пикселей -->

Рассмотрим применения данных атрибутов на примере. Для этого создадим таблицу (но уже без крайне редко применяемых тегов caption и th) и зададим параметр атрибуту border (граница), width (ширина таблицы, строки или ячейки) и bgcolor (цвет ячейки)

<html>
   <head>
   <title>Таблица html</title>
   </head>
<body>

<table border="1" width="300"> <!-- Задаём границу в 1 пиксель и ширину в 300 пикселей -->

   <tr bgcolor="Gainsboro">  <!-- Задаём цвет ячеек для всей первой строки -->   
        <td> 
            Стобец 1
        </td> 

        <td> 
            Стобец 2
        </td> 
   </tr> 

   <tr> 
        <td>
            Текст в первой ячейке первого столбца
        </td>

        <td> 
            Текст во второй ячейке второго столбца
        </td> 
   </tr>  

</table> 

</body>
</html>


В результате в браузере будет выведена таблица следующего вида

frame — атрибут, обозначающий рамку вокруг таблицы. Есть следующие значения:

void — рамки нет,
above — только верхняя рамка,
below — только нижняя рамка,
hsides — только верхняя и нижняя рамки,
vsides — только левая и правая рамки,
lhs — только левая рамка,
rhs — только правая рамка,
box — все четыре части рамки.

rules — атрибут, обозначающий границы внутри таблицы, между ячейками. Есть следующие значения:

none — между ячейками нет границ,
groups — границы только между группами строк и группами столбцов (будут рассмотрены чуть позже),
rows — границы только между строками,
cols — границы только между стобцами,
all — отображать все границы.

Рассмотрим пример кода

<html>
   <head>
   <title>Таблица html</title>
   </head>
<body>

<table border="1" width="300" frame="void" rules="rows"> <!-- Задаём границу в 1 пиксель и ширину в 300 пикселей. Внешней рамки нет. Есть граница между строками -->

   <tr bgcolor="Gainsboro">  <!-- Задаём цвет ячеек для всей первой строки -->  
        <td> 
            Стобец 1
        </td> 

        <td>
            Стобец 2
        </td> 
   </tr> 

   <tr> 
        <td>
            Текст в первой ячейке первого столбца
        </td>

        <td> 
            Текст во второй ячейке второго столбца
        </td> 
   </tr>  

</table> 

</body>
</html>

Результат

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

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

align — выравнивание таблицы. Её можно расположить слева (left), справа (right), по центру (center)
cellspacing — расстояние между ячейками таблицы. Указывается в пикселях (по умолчанию 0 пикселей)
cellpadding — отступ в пикселях между содержимым ячейки и её внутренней границей (по умолчанию 0 пикселей)
Рассмотрим пример

<html>
   <head>
   <title>Таблица html</title>
   </head>
<body>

<table width="400" align="center" cellspacing="5" cellpadding="10"> 
<!-- Задаём ширину 400 пикселей. Таблицу выравниваем по центру. Расстояние между ячейками 5 пикселей. Отступ между содержимым ячейки и её границей 10 пикселей -->

   <tr bgcolor="Gainsboro">  <!-- Задаём цвет ячеек для всей первой строки -->
        <td> 
            Стобец 1
        </td> 

        <td> 
            Стобец 2
        </td> 
   </tr> 

   <tr> 
        <td>
            Текст в первой ячейке первого столбца
        </td>

        <td> 
            Текст во второй ячейке второго столбца
        </td> 
   </tr>  

</table> 

</body>
</html>


В браузере отобразится выравненная по центру таблица следующего вида
Внимание! Если не указывать ширину таблицы или ячейки, не задавать отступы и выравнивания, то ширина таблицы будет строиться по содержимому — границы будут примыкать к словам, а ширина будет выбираться автоматически.

Строки tr и ячейки td в таблицах HTML


Снова напомню о том, что таблицы формируются построчно (tr). В строках (tr) уже находятся ячейки (td). Если задавать параметр для строки (tr), то он будет действителен для всех ячеек (td) в этой строке, если для конкретной ячейки, то только для неё. В примерах выше я указывал цвет для строки, этот параметр распространялся соответственно для всех ячеек.
  <tr bgcolor="Gainsboro">  <!-- Задаём цвет ячеек для всей первой строки -->
<!-- цвет действителен для всех ячеек td -->
        <td> 
            Стобец 1
        </td> 

        <td> 
            Стобец 2
        </td> 
   </tr>


Для тегов tr и td есть следующие

align — выравнивание текста внутри ячейки. По левому краю (left), по правому краю (right), по центру (center)
valign — выравнивание текста внутри ячейки по вертикали. Вверх (top), вниз (bottom), по центру (middle)
bgcolor — задает цвет строки
width — ширина столбца (все ячейки ниже примут данный параметр) указывается в пикселях или в процентах, где 100% ширина всей таблицы
height — высота ячейки (все ячейки в строке примут данный параметр)

Рассмотрим код, где содержимое ячеек (td), выравнено по разным краям: в первой по левому, во второй по правому:

<html>
   <head>
   <title>Таблица html</title>
   </head>
<body>

<table width="400" cellspacing="5" cellpadding="10"> 
<!-- Задаём ширину 400 пикселей. Таблицу выравниваем по центру. Расстояние между ячейками 5 пикселей. Отступ между содержимым ячейки и её границей 10 пикселей -->

   <tr bgcolor="Gainsboro">  <!-- Задаём цвет ячеек для всей первой строки -->
        <td> 
            Стобец 1
        </td> 

        <td> 
            Стобец 2
        </td> 
   </tr> 

   <tr> 
        <td align="left">
            Текст в первой ячейке первого столбца
        </td>

        <td align="right"> 
            Текст во второй ячейке второго столбца
        </td> 
   </tr>  

</table> 

</body>
</html>


Результат

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

Спасибо за внимание! Надеюсь материал был полезен!

tradebenefit.ru

Таблицы HTML4

У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!

Для создания таблиц используются следующие теги:

  • <TABLE> — Для обрамления самой таблицы;
  • <THEAD> — Определяет заголовки элементов таблицы;
  • <TBODY> — Определяет тело таблицы;
  • <TFOOT> — Определяет нижнюю, завершающую часть таблицы;
  • <CAPTION> — Для обрамления подписи; Атрибут ALIGN={TOP | BOTTOM} — размещение заголовка относительно таблицы (вверху или внизу таблицы)
  • <COLGROUP> — Задание свойств одного или более столбцов;
  • <COL> — Задание свойств одного или более столбцов;
  • <TR> — Для обрамления рядов таблицы;
  • <TD> — Для обрамления клеток
    • <TH> — </TH> тех, что нужно показывать пожирнее, например заголовков;
    • <TD> — </TD> обычных.

Далее представлены ранее использовавшиеся атрибуты формирования таблиц html.

Ознакомиться с современными методами форматирования таблиц в соответствии с современным стандартом HTML5 можно на странице Таблицы HTML

Атрибуты TABLE:

имя атрибута

возможные значения

смысл

примечания

ALIGN

LEFT, RIGHT

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

LEFT — Таблица прижимается влево (используется по умолчанию).

RIGHT – Таблица прижимается вправо. Текст в клетках прижимается к влево.

VALIGN

TOP, MIDDLE, BOTTOM

Определяет вертикальное расположение текста в таблице

 

WIDTH

целое

Определяет ширину таблицы в пикселах или в процентах от ширины экрана. Для задания n в процентах используется знак (%) процента.

броузер использует это значение, если оно не конфликтует с требованиями ширины в соседних ячейках в том же самом столбце

HEIGHT

целое

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

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

BACKGROUND

URL

Задает в качестве фона графический файл.

 

BGCOLOR

 

Задает цвет фона.

 

BORDER

целое

Ширина рамки в пикселах

По умолчанию рамка не рисуется

BORDER COLOR

 

Задание цвета рамки

 

BORDER COLORLIGHT

 

Задание цвета для рамки с тенью (псевдо трехмерная графика)

Используется вместе с атрибутами BORDERCOLORDARK и BORDER

BORDER COLORDARK

 

Задание цвета для рамки с тенью (псевдо трехмерная графика

 

CELLPADDING

целое

Задает расстояние в пикселах между границей клетки и ее содержимым.

 

CELLSPACING

целое

Задает расстояние в пикселах между внешней рамкой таблицы и ее клетками внутри таблицы.

 

COLS

целое

Число столбцов в таблице. Данный атрибут ускоряет вывод таблицы, что особенно заметно для больших таблиц

 

FRAME

VOID, ABOVE, BELOW, HSIDES, LHS, RHS, VSIDES, BOX, BORDER

Определяет метод отрисовки рамки

VOID — Убрать наружную часть рамки.

ABOVE — Показывает верхнюю границу таблицы.

BELOW — Показывает нижнюю границу таблицы.

HSIDES — Показывает верхнюю и нижнюю границу таблицы.

LHS — Показывает левую границу таблицы.

RHS — Показывает правую границу таблицы.

VSIDES — Показывает левую и правую границу таблицы.

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

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

RULES

NONE, GROUPS, ROWS, COLS, ALL

Определяет как будут показаны разделительные линии ( внутренние границы ) таблицы

NONE — Устраняет все границы внутри таблицы.

GROUPS — Показывает горизонтальные границы между всеми группами таблицы. GROUPS определены элементами THEAD, TBODY, TFOOT, и COLGROUP

ROWS – Показывает горизонтальные границы между всеми рядами таблицы.

COLS – Показывает вертикальные границы между всеми колонками таблицы.

ALL — Показывает все границы.


Атрибуты TD, TH:

имя атрибута

возможные значения

смысл

примечания

NOWRAP

 

подавляет перенос слов

эквивалентно использованию непрерывных пробелов (&nbsp;) вместо обычных пробелов в пределах содержимого ячейки

ROWSPAN

целое

число строк, перекрываемых ячейкой

по умолчанию 1

COLSPAN

целое

число столбцов, перекрываемых ячейкой

по умолчанию 1

COLSPEC

 

ширина колонок в символах или в процентах

например COLSPEC=»20%»

ALIGN

LEFT, CENTER, RIGHT, JUSTIFY, CHAR

горизонтальное выравнивание данных в ячейке

по умолчанию LEFT или атрибут ALIGN во включающем элементе TR,

Если задано ALIGN=”CHAR”, то задается свойство CHAR=”.”, с указанием относительно какого символа выравнивать.

Свойство CHAROFF=Length заставляет сдвигать ячейки, не содержащие заданного символа

VALIGN

TOP, MIDDLE, BOTTOM, BASELINE

вертикальное выравнивание данных в ячейке

перекрывается атрибутом VALIGN во включающем элементе TR

WIDTH

целое

ширина ячейки в пикселях

броузер использует это значение, если оно не конфликтует с требованиями ширины в соседних ячейках в том же самом столбце

HEIGHT

целое

высота ячейки в пикселях

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

BACKGROUND, BGCOLOR, BORDERCOLOR, BORDERCOLORLIGHT, BORDERCOLORDARK

Аналогично атрибутам TABLE


Атрибуты TR только ALIGN, VALIGN – аналогично для TD, TH

Пример:

Потребление пива сотрудниками вневедомственной охраны пивзавода

Ф.И.О литров сорт
Иванов Иван Иванович 133 Хейнекен
<TABLE>
<CAPTION>потребление пива сотрудниками вневедомственной охраны
	пивзавода</CAPTION>
<TR><TH>Ф.И.О</TH>
<TH>литров</TH>
<TH>сорт</TH>
</TR>
<TR><TD> Иванов Иван Иванович </TD>

<TD ALIGN=CENTER >133</TD>
<TD>Хейнекен</TD>

</TR>
</TABLE>

Атрибуты <TABLE>:

BORDER=2 — Ширина рамки в пикселях

ALIGN=CENTER

CELLPADDING=5 – расстояние между содержимым ячеек и границей таблицы

CELLSPACING=5 – расстояние между ячейками таблицы

WIDTH=»50%» — ширина таблицы в пикселях или относительно размера окна просмотрщика в процентах

COLS=4 –Количество столбов в таблице

Клетка может занимать несколько строк или столбцов. Для этого используются атрибуты ROWSPAN или COLSPAN в теге <TH> или <TD>. Для задания ширины таблицы или колонки используется атрибут WIDTH, который может быть задан в процентах или пикселях. Вот пример:

образец таблицы

 

средний

повышенная пушистость

рост

вес

самцы

29см

6.2кГ

40%

самки

25см

4.9кГ

43%

<CENTER><TABLE BORDER=2 ALIGN=CENTER CELLPADDING=5 >
<CAPTION><I>образец таблицы</I></CAPTION>
<TR><TH ROWSPAN="2"></TH>
<TH COLSPAN="2">средний</TH>
<TH ROWSPAN="2">повышенная
<BR>пушистость</TH>
</TR>
<TR><TH>рост</TH>
<TH>вес</TH>
</TR>

<TR><TH>самцы</TH>
<TD>29см</TD>
<TD>6.2кГ</TD>

<TD>40%</TD>
</TR>
</TABLE></CENTER>

<COL>

<COL ALIGN= {CENTER | LEFT | RIGHT} SPAN= n >

Задание свойств одного или более столбцов таблицы. Используется совместно с командой COLGROUP.Параметры, определяемые командой COL, «сильнее» параметров команды COLGROUP.


<COLGROUP>

Свойства, заданные командой COLGROUP, переопределяются комндой COL. Эта команда влияет на отрисовку линий, определяемых атрибутом RULES= команды TABLE.

<COLGROUP ALIGN={CENTER | LEFT | RIGHT}.SPAN= n — Задание числа последовательных столбцов.>

Пример :

<TABLE>
<COLGROUP ALIGN=RIGHT><COLGROUP SPAN=2 ALIGN=LEFT>
<TBODY>
<TR>
<TD>This column is in the first group and is right-aligned</TD>
<TD>This column is in the second group and is left-aligned</TD>
<TD>This column is in the second group and is left-aligned</TD>
</TR>
</TABLE>

Пример :

<TABLE>
<COLGROUP><COL ALIGN=RIGHT><COL ALIGN=LEFT>
<COLGROUP><COL ALIGN=CENTER>
<TBODY>
<TR>
<TD>This is the first column in the group and is right-aligned.</TD>
<TD>This is the second column in the group and is left-aligned.</TD>
<TD>This column is in a new group and is centered.</TD>
</TR>
</TABLE>

Практически все атрибуты табличных тегов считаются устаревшими.

Таблицы HTML – валидное оформление таблиц по стандарту HTML5.

Читать дальше: Фреймы в HTML

htmlweb.ru

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

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