Таблицы в html

Настраиваем внешний вид

Внешний вид таблицы можно настроить стилями, как у любого другого объекта на странице: 

  • сделаем синие границы;
  • толщина границ — 2 пикселя;
  • расстояние между ячейками — 10 пикселей.

В этом примере мы прописали стили «инлайном», то есть прямо внутри кода. Но также можно было вынести эти же стили CSS-файл или в таблицу стилей в начале документа. Тогда это выглядело бы так:

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

Ещё можно можно настроить стили у каждой ячейки отдельно. Например, в первой строке у 2 и 3 ячейки сделать жёлтый фон:

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

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

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

Видно, что между ячейками расстояние есть, а внутри ячеек текст как будто зажат. Чтобы дать тексту внутри ячеек подышать, используют padding: 

Атрибуты и свойства тега

К открывающему тегу <table> можно прописывать различные атрибуты.

1. Свойство align=»параметр» — задает выравнивание таблицы. Может принимать следующие значения:

  • left — выравнивание по левому краю
  • center — выравнивание по центру
  • right — выравнивание по правому краю

В разобранном выше примере мы выравнивали таблицу по центру align=»center».

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

Например

2. Свойство background=»URL» — задает фоновой рисунок. Вместо URL должен быть написан адрес фонового изображения.

Пример

Преобразуется на странице в следующее:

Пример таблицы
Столбец 1 Столбец 2

В рассмотренном примере наше фоновое изображение находится в папке img (которая находится в той же директории, что и html-страница), а называется изображение fon.gif

Обратите внимание на то, что в теге мы добавили style=»color:white;». Поскольку фон почти черный, то для того, чтобы текст не слился с фоном, мы сделали текст белым

Более подробно про фон читайте в статье: как сделать фон для сайта

3. Свойство bgcolor=»цвет» — задает цвет фона таблицы. В качестве цвета можно выбрать любой из всей палитры (см. коды и названия html цветов)

4. Свойство border=»число» — задает толщину рамки таблицы. В предыдущих примерах мы указывали border=»1″, что означает толщина рамки — 1 пиксель.

5. Свойство bordercolor=»цвет» — задает цвет рамки. Если border=»0″, то рамки не будет и цвет рамки не будет иметь смысла.

6. Свойство cellpadding=»число» — отступ от рамки до содержимого ячейки в пикселях.

7. Свойство cellspacing=»число» — расстояние между ячейками в пикселях.

8. Свойство cols=»число» — число столбцов. Если его не задать, то браузер сам определит число столбцов. Разница лишь в том, что указание этого параметра, скорее всего, ускорит загрузку таблицы.

9. Свойство frame=»параметр» — как отображать границы вокруг таблицы. Может принимать следующие значения:

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

10. Свойство height=»число» — задает высоту таблицы: либо в пикселях, либо в процентах.

11. Свойство rules=»параметр» — где отображать границы между ячейками. Может принимать следующие значения:

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

12. Свойство width=»число» — задает ширину таблицы: либо в пикселях, либо в процентах.

13. Свойство class=»имя_класса» — можно указать имя класса, которому принадлежит таблица.

14. Свойство style=»стили» — стили можно задать индивидуально для каждой таблицы.

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

Деление строк таблицы на логические секции

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

Для группировки строк таблицы разбиваются элементами «thead», «tbody» и
«tfoot» на логические секции (наподобие веб-страницы), которые формируются соответствующими парными тегами:
<thead>
(от англ. table head – шапка таблицы),
<tbody>
(от англ. table body – тело таблицы) и
<tfoot>
(от англ. table foot – подвал таблицы).

Элемент «thead» предназначен для группирования одной или нескольких строк вверху таблицы.
По логике вещей в данной секции нужно размещать строки с заголовочными ячейками «th», однако в случае их отсутствия,
можно просто группировать строки, применяя к ним общее форматирование через стили CSS. Допускается применение только
одного элемента «thead» в пределах одной таблицы, который должен располагаться после элементов
«caption» или «colgroup», если они конечно присутствуют, но перед элементами
«tbody», «tfoot» или «tr». При чем секция может
вообще не содержать строк и даже в некоторых случаях допускается отсутствие закрывающего тега. Но, как всегда, мы так поступать не будем, а,
соответственно, и описывать такие ситуации не станем ни здесь, ни далее.

Элемент «tfoot» предназначен для группирования одной или нескольких строк внизу таблицы.
Опять же, логика подсказывает, что в данной секции нужно размещать строки с итоговыми ячейками «td», однако в случае
их отсутствия, можно просто группировать строки, применяя к ним общее форматирование через стили CSS. Допускается
применение только одного элемента «tfoot» в пределах одной таблицы, который разрешается располагать, как
непосредственно перед элементом «tbody», так и сразу же после него. Мы будем использовать второй вариант и всегда
располагать «подвал» таблицы после ее «тела». Если итоговых ячеек нет, то элемент
«tfoot» можно оставить пустым, но указывать его для сохранения логической разметки нужно, если мы указали элементы
«thead» и «tbody».

Cекций «tbody» может быть несколько. Располагаются они друг за другом после секции
«thead». Все они предназначены для размещения обычных строк с данными, как правило сгруппированных по каким-либо
признакам, если секций несколько. Кроме того, допускается отсутствие строк в секциях «tbody», но если секции
созданы, то использовать строки вне «thead», «tbody» и
«tfoot» не разрешается. Короче, если мы решили использовать логическую разбивку таблицы на перечисленные разделы, то
нужно соответствовать своим устремлениям до конца.

Теперь давайте рассмотрим простейшее деление таблицы на секции (см. пример №2).

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Логическая разметка таблицы</title>
</head>
<!-- Заголовок документа не показан на рисунке -->
<body>
	<table border="1">
	<caption>Деление на секции с выделением разным фоном</caption>
		
		<thead style="background-color: yellow">
			<tr>
				<th>Я &ndash; первая заглавная ячейка </th>
				<th>А я &ndash; вторая заглавная ячейка</th>
			</tr>
		</thead>
		
		<tbody style="background-color: green">
			<tr>
				<td>Я &ndash; первая ячейка в первой строке тела</td>
				<td>Я &ndash; вторая ячейка в первой строке тела</td>
			</tr>
			<tr>
				<td>Я &ndash; первая ячейка во второй строке тела</td>
				<td>Я &ndash; вторая ячейка во второй строке тела</td>
			</tr>
		</tbody>
		
		<tfoot style="background-color: grey">
			<tr>
				<td>Итог:</td>
				<td>использовано три фона</td>
			</tr>
		</tfoot>
	</table>
</body>
</html>

Пример №2. Разбиение таблицы на секции

Может показаться, что введение элементов «thead», «tbody» и
«tfoot» излишне. Ведь можно было бы разрешить использовать для выделения и группировки строк универсальный элемент
«div», применяя к нему нужные стили CSS. Однако давайте не будем забывать,
что «div» – элемент физической разметки, а перечисленные элементы осуществляют логическую разметку

Конечно,
без стилей CSS они, также как и «div» свое содержимое никак не изменяют, зато для
поисковых машин, вне зависимости от применяемых к ним стилей, дают четкое представление о структуре таблицы, а также виде и степени важности данных,
располагающихся в соответствующих разделах.

Формирование строк и ячеек таблицы

После заголовка, если он есть, можно начинать располагать строки «tr», которые формируются
парными тегами <tr>
(от англ. table row – строка таблицы).
Внутри строк располагаются ячейки «th» и «td», формирующиеся соответствующими
парными тегами <th>
(от англ. table header cell – заголовочная ячейка таблицы)
и <td>
(от англ. table data cell – табличная ячейка с данными).
Заголовочные ячейки «th», если они используются, содержат заголовки столбцов или строк, которые по
умолчанию отображаются браузерами полужирным шрифтом и центрируются. Данные в обычных ячейках отображаются обычным шрифтом и выравниваются по
левому краю.

Как сделать фон таблицы?

Можно также задать фон таблице для всех ее ячеек вместе взятых, а также для каждой ячейки по отдельности. Можно задать фон цветом, а можно и картинкой. Для фона существуют два атрибута:

BGCOLOR –  цвет фона всей таблицы или к каждой ячейке по отдельности. Цвет задается кодом или словом.BACKGROUND –фон в таблице заполняется рисунком.

Для лучшего понимания посмотрите пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Таблицы в HTML</title>
</head>
<body>
<table border="1" width="300" height="200" bgcolor="#FFF8D2">
<tr>
<td align="center">ряд 1 ячейка1</td>
<!-- содержимое выравниваем горизонтально по правому краю, вертикально - прижимаем к низу -->
<td align="center">ряд1 ячейка2</td>
</tr>

<tr>
<!-- рисунок как фон -->
<td align="center" background="fon.jpg">ряд 2 ячейка 1</td>
<!-- фон цветом -->
<td align="center" bgcolor="#33FF99">ряд 2 ячейка 2</td>
</tr>
</table>
</body>
</html>

Результат:

И напоследок расскажу еще о двух полезных атрибутах.

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

CELLPADDING –расстояние между рамкой каждой ячейки html таблицы и содержимым в ней материалом.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Таблицы в HTML</title>
</head>
<body>
<table border="1" cellpadding="15">
<tr>
<td>ряд 1 ячейка1</td>
<td>ряд1 ячейка2</td>
</tr>

<tr>
<td>ряд 2 ячейка 1</td>
<td>ряд 2 ячейка 2</td>
</tr>
</table>
</body>
</html>

Результат:

ряд 1 ячейка1 ряд1 ячейка2
ряд 2 ячейка 1 ряд 2 ячейка 2

CELLSPACING –расстояние между границами соседних ячеек.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Таблицы в HTML</title>
</head>
<body>
<table border="1" cellspacing="8">
<tr>
<td>ряд 1 ячейка1</td>
<td>ряд1 ячейка2</td>
</tr>

<tr>
<td>ряд 2 ячейка 1</td>
<td>ряд 2 ячейка 2</td>
</tr>
</table>
</body>
</html>

Результат:

ряд 1 ячейка1 ряд1 ячейка2
ряд 2 ячейка 1 ряд 2 ячейка 2

Фух, рассказал!
Надеюсь, с задачей я справился и доступно объяснил все, что я знал про html таблицы. А вам, рекомендую хорошо закрепить материал.
Попробуйте создать собственную таблицу, а лучше целый каркас для веб-страницы из таблицы html.
Всего вам хорошего!
Спасибо, что посетили мой блог BlogGood.ru

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

Популярные статьи:

  • Как узнать id компьютера
    Дата: 29 марта 2013
    Прокомментировано:90
    просмотров: 325687

  • Размеры форматов листов А0 – А7
    Дата: 23 января 2013
    Прокомментировано:3
    просмотров: 272066

  • Смешные логические загадки с подвохом, отгадки прилагаются
    Дата: 12 ноября 2014
    Прокомментировано:5
    просмотров: 204811

  • Установка windows 7 на ноутбук
    Дата: 18 декабря 2012
    Прокомментировано:169
    просмотров: 185225

  • Как включить или отключить Aero в Windows 7
    Дата: 1 июня 2013
    Прокомментировано:6
    просмотров: 160064

Понятие табличной верстки

Как было сказано выше, в элемент «table» главным образом используется для представления
табличной информации. Однако в предыдущих версиях HTML таблицы с невидимыми границами, активно использовались для
разметки сетки веб-документа. В результате страница состояла из отдельных ячеек, в которых располагались остальные элементы. Такой способ верстки
получил название табличная верстка. И не смотря на то, что позднее на смену
табличной верстке пришла блочная верстка, в основе которой лежит активное использование элемента
«div», ее использование все еще применяется для разметки отдельных частей документа,
например, для создания двухколоночного текста или выравнивания отдельных элементов.

Важно помнить!

Теги <thead> и <tfoot> нужны не всегда. Бывают таблицы без шапки и подвала.

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

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

Пример:

1 Мавзалеев И. В. 10.09.1992
2 Киреева А. Ю. 02.05.1996
3 Корнеев И. Ю. 09.10.1990
4 Тресков В. А. 25.03.1993
5 Ибрагимов А. Е. 15.10.1994
6 Борисенко Д. С. 10.10.1991

В таблице выше шесть строк, каждая из которых содержит три ячейки. Здесь нет важных для смысла признаков, по которым можно сгруппировать содержимое таблицы. Поэтому будет достаточно тега <caption> (придумаем его и скроем) и тега <tbody>, а вот теги <thead> и <tfoot> можно опустить.

Слияние нескольких строк или столбцов

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

Исходная разметка выглядит так:

Но результат не такой, как хотелось бы:

Animals
Hippopotamus
Horse Mare
Stallion
Crocodile
Chicken Cock
Rooster

Нужно, чтобы  «Animals», «Hippopotamus» и «Crocodile» распространялись на два столбца, а «Horse» и «Chicken» — на две строки. К счастью, табличные заголовки и ячейки имеют атрибуты , которые позволяют это сделать. Оба принимают безразмерное числовое значение, которое равно количеству строк или столбцов, на которые должны распространяться ячейки. Например, распространяет ячейку на два столбца.

Воспользуемся и чтобы улучшить таблицу.

  1. Сначала создайте локальную копию animals-table.html и minimal-table.css в новой папке на вашем компьютере. Код HTML содержит пример с животными, который вы уже видели выше.
  2. Затем используйте атрибут чтобы распространить «Animals», «Hippopotamus» и «Crocodile» на два столбца.
  3. Наконец, используйте атрибут чтобы распространить  «Horse» и «Chicken» на две строки.
  4. Сохраните код и откройте его в браузере, чтобы увидеть улучшения.

Примечание: Законченный пример можно посмотреть в animals-table-fixed.html на GitHub (живой пример).

HTML тэги tr и td

  • align — выравнивает текст в ячейках по горизонтали, может принимать значения: слева (right), справа (left), по центру (center),
  • valign — выравнивает текст в ячейках по вертикали, может принимать значения: вверх (top),
    вниз (bottom), по центру (middle),
  • bgcolor — задает цвет строки.

html tr

Название таблицы
1 2 3
11 Текст во всех ячейках этой строки
центрирован по центру как по вертикали,
так и по горизонтали
12 13
21 Здесь текст прижат к левому краю
по горизонтали и книзу — по вертикали
22 23
31 Текст во всех ячейках этой строки
прижат по горизонтали к правому краю,
по вертикали — кверху
32 33

<td><td>bgcolor=»red»

21 Здесь текст прижат к левому краю
по горизонтали и книзу — по вертикали

  • width — задает ширину столбца (в пикселах или в процентном соотношении, где за 100% принимается ширина
    таблицы),
  • height — задает высоту ячейки, причем все ячейки в этой же строке станут этой высоты.

<th>
1
2
3

Предыдущий урок Вернуться в раздел Следующий урок
Скачайте одним архивом видеоуроки HTML!

Если этот сайт оказался вам полезен, пожалуйста, посмотрите другие наши статьи и разделы.

Код кнопки:<a href=»http://site-do.ru»><img src=»http://site-do.ru/images/sitedo1.gif» alt=»Как создать свой сайт»></a>

Добавление заголовков к строкам и столбцам

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

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

Очистите файл index.html и добавьте строку заголовков для столбцов с помощью следующего кода:

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

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

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

Давайте добавим в таблицу заголовки строк и данные, поместив выделенный ниже фрагмент кода под уже существующим кодом в файле index.html:

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

Разделение таблицы на части

Следующие HTML теги используются для разделения таблицы на части:

  • Тег <thead> используется для содержания заголовка группы в таблице («шапка таблицы», не путайте с заголовками).
  • Тег <tfoot> используется для содержания «подвала» таблицы (футер).
  • Тег <tbody> используется для содержания «тела» таблицы (боди).

Элемент <thead> должен быть использован только один раз в одной таблице в следующем контексте: в составе элемента <table> (как дочерний (вложенный) элемент), при наличии тегов <caption> (наименование таблицы) и <colgroup> (определяет группу столбцов в таблице) должен следовать после этих элементов, но прежде, чем любой тег <tbody>, <tfoot> и <tr>. Кроме того, элемент <thead> должен иметь один или более тегов <tr> внутри (контейнер для создания строки).

Элементы <thead>, <tbody> и <tfoot> не влияют на расположение таблицы по умолчанию. Тем не менее, с использованием CSS, вы сможете стилизовать эти элементы по своему усмотрению.

Пример:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <thead></title>
	</head>
	<body>
		<table>
			<thead style="background-color:silver">
				<tr>
					<th>Услуга</th><th>Стоимость</th>
				</tr>
			</thead>
			<tfoot style="background-color:coral"> <!-- Тег <tfoot> применяется для создания подвала таблицы. Его принято писать после тега<thead>, но отображается он в самом низу таблицы. -->
				<tr>
					<td>Сумма</td><td>3 000</td>
				</tr>
			</tfoot>
			<tbody style="background-color:khaki">
				<tr>
					<td>Чтение в слух</td><td>1 000</td>
				</tr>
				<tr>
					<td>Игра на перфораторе</td><td>2 000</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

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


Рис. 22 Пример использования тегов <thead>, <tbody> и <tfoot>.

Язык гипертекстовой разметки HTML предоставил нам десять уникальных тегов, предназначенных для работы с таблицами, предлагаю Вам повторить их перед прохождением практического задания:

Тег Описание
<table> Определяет содержимое таблицы.
<caption> Определяет наименование таблицы.
<th> Определяет заголовочную ячейку таблицы.
<tr> Определяет строку таблицы.
<td> Определяет ячейку данных таблицы.
<thead> Используется для содержания заголовка группы в таблице (шапка таблицы).
<tbody> Используется для содержания «тела» таблицы.
<tfoot> Используется для содержания «подвала» таблицы (футер).
<col> Определяет заданные свойства столбцов для каждого столбца в пределах тега <colgroup>.
<colgroup> Определяет группу столбцов в таблице.

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

Ячейки по вертикали объединяются с помощью атрибута rowspan. Числовое значение его определяет количество сокращаемых по вертикали ячеек. Эта тема представляет самые большие трудности для студентов.

Самым легким для понимания ее является следующий способ: создайте таблицу и пронумеруйте ячейки разными цифрами. Например такую:

1 2 3 4
5 6 7 8
9 10 11 12

Код таблицы будет следующий:

Давайте избавимся от двузначных чисел, объединив столбцы с цифрами 6 и 10, 7 и 11, 8 и 12. Оставим в объединенных по вертикали ячейках числа: 6, 7 и 8.

Объединяем 6 и 10. В теге <td>, содержащем цифру 6, прописываем: <td rowspan=»2″>, а конструкцию <td>10</td> удаляем вообще. Аналогично нужно сделать и для оставшихся пар цифр. В итоге код преобразится таким образом:

Браузер же должен выдать нужную нам таблицу:

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

Таблицы в HTML: Видео

В этом уроке мы рассмотрим такие вопросы:

  1. Как создать таблицу в HTML (тег <table>).
  2. Разделение таблицы на логические части (теги <thead>, <tbody>, <tfoot>).
  3. Как создать ячейку заголовка столбца таблицы в HTML (тег <th>).
  4. Как создать строки и ячейки таблицы в HTML (теги <tr> и <td>).
  5. Как сделать заголовок таблицы в HTML (тег <caption>).
  6. Как сделать границы таблицы в HTML (атрибут border).
  7. Как сделать отступ в таблице HTML (атрибуты cellpadding и cellspacing).
  8. Как объединить ячейки таблицы в HTML (атрибуты colspan и rowspan).
  9. Как сделать фон таблицы в HTML (атрибут bgcolor).
  10. Как задать размер таблицы в HTML (атрибуты width и height).
  11. Группирование строк и столбцов таблицы (теги <colgroup> и <col>).

И так, обо всем по порядку.

Границы таблицы

Как видно из примера, браузер по умолчанию не отображает рамки таблицы. Добавить их можно двумя способами, используя атрибут border, либо при помощи CSS стилей. Рассмотрим подробно оба варианта.

Атрибут span class=»attribute»>border устанавливает рамку вокруг таблицы, а также границы между ячеек. Если значение атрибута не указано, то браузер отображает рамку толщиной в один пиксель. По умолчанию рамка изображается двойной.

Выглядит это так:

Месяц Дата
Январь 10.01.2014
Февраль 10.01.2014

Установить границы таблицы можно также при помощи CSS свойства border, которое задаёт толщину и стиль рамки.

Rowspan

Rowspan is for rows just what colspan is for columns (rowspan allows a cell to span multiple rows).

<!DOCTYPE html>
<title>My Example</title>

<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
}
</style>
<table>
<tr>
<th rowspan=»4″>Table Header</th>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</table>

In the early days of the web, web designers often used tables for layout purposes. For example, the left column was a big table cell, the main content area was another cell, etc. This was because of the grid structure that tables offer.

However, this technique is not recommended. CSS (and browser support) is now at the stage where advanced layouts can be achieved using HTML in conjunction with CSS.

HTML should be used to provide the document structure and meaning. CSS should be used for its presentation.

Рейтинг
( Пока оценок нет )
Editor
Editor/ автор статьи

Давно интересуюсь темой. Мне нравится писать о том, в чём разбираюсь.

Понравилась статья? Поделиться с друзьями:
Люкс-хост
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: