Граница таблицы в html: Таблицы | htmlbook.ru

Границы HTML таблиц без CSS

Создание визуальных границ у HTML таблиц без использования CSS и атрибута border тега table:

HTML код:

<table cellspacing="3" bgcolor="#000000">
	<tr bgcolor="#ffffff">
		<th>Header</th>
		<th>Header</th>
	</tr>
	<tr bgcolor="#ffffff">
		<td>Data</td>
		<td>Data</td>
	</tr>
</table>

Границы HTML таблиц без CSS

Некогда, главным образом (но не только) в 1990ые существовало несколько приемов HTML, использовавшихся, чтобы добиться некоторых эффектов, которые ныне делаются с помощью CSS. Обращение с границами HTML таблиц было одним из них.

В данном случае, на самом деле, имеет место не обращение с границами, а его имитация через использование атрибутов

Общая идея

1. Атрибут bgcolor тега table задает фон указанного цвета.
2. Атрибут bgcolor тега tr используется, чтобы фон содержимого таблицы (то есть, строки и ячейки) стал указанного цвета, отличающегося от фона тега table.
3. Атрибут cellspacing тега table создает пространство вокруг ячеек таблицы. Это пространство получает цвет, установленный атрибутом bgcolor тега table, а поскольку он отличается от фона строк и ячеек, это создает вокруг ячеек визуальные границы цвета фона таблицы.

Древние Netscape, Mozilla и Arachne

Создание границ HTML таблиц без CSS используется с самых ранних времен Интернета. Так что после некоторой корректировки будет работать в Netscape 3.04 — 6.0, Mozilla 0.6 — 1.7.13 и в Arachne, браузере для DOS:

HTML код:

<table cellspacing="0" cellpadding="0" border="0" bgcolor="#000000">
	<tr>
		<td>
			<table cellspacing="3" border="0">
				<tr bgcolor="#ffffff">
					<th>Header</th>
					<th>Header</th>
				</tr>
				<tr bgcolor="#ffffff">
					<td>Data</td>
					<td>Data</td>
				</tr>
			</table>
		</td>
	</tr>
</table>

Примечание: этот скорректированый HTML код роботает не только в Netscape 3.04 — 6.0, Mozilla 0.6 — 1.7.13 или Arachne, но так же и во всех браузерах и их версиях, перечисленных в секции «Поддержка в браузерах»: как современных, так и старых.

Поддержка в браузерах

Windows

Internet Explorer 3.0+

Firefox 1.0+

Google Chrome

Opera 2.12+

Safari 3.1+

SeaMonkey 1.0+

Mozilla 1.0+

Netscape 7.0+

Linux

Firefox 1.0+

Google Chrome / Chromium

Opera 5.0+

SeaMonkey 1.0+

Mozilla 1.0+

Netscape 7.0+

NetSurf 3.0

Dillo 3.0.2

Ещё

HTML, CSS, JavaScript, Perl, PHP, MySQL: Weblibrary.biz

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

‘border-collapse’

Значение: collapse | separate | inherit
Начальное значение: collapse
Область применения: элементы ‘table’ и ‘inline-table’
Наследование: да
Процентные значения: N/A
Устройства: визуальные

Это свойство позволяет выбрать модель границ таблицы. Значение ‘separate’ означает модель с отдельными границами. Значение ‘collapse’ задает модель с пересекающимися границами. Эти модели описаны ниже.

Модель отдельных границ

‘border-spacing’

Значение: <length> <length>? | inherit
Начальное значение: 0
Область применения: элементы ‘table’ и ‘inline-table’
Наследование: да
Процентное задание: не определено
Устройства: визуальные

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

В этой модели каждая ячейка имеет собственные границы. Свойство ‘border-spacing’ определяет расстояние между границами соседних ячеек. Это расстояние заполняется фоном элемента таблицы. У строк, столбцов, групп строк и групп столбцов не может быть границ (т.е. агенты пользователей должны игнорировать свойства границ для данных элементов).

Таблицу, представленную на рисунке ниже, можно создать с помощью следующей таблицы стилей:

TABLE { border: outset 10pt;
border-collapse: separate;
border-spacing: 15pt }
TD { border: inset 5pt }
TD.special { border: inset 10pt } /* Верхняя левая ячейка */

Таблица, в которой для свойства ‘border-spacing’ установлено определенное значение. Обратите внимание, что у каждой ячейки имеется собственная граница, а у таблицы отдельная граница.

Границы вокруг пустых ячеек: свойство ’empty-cells’

’empty-cells’

Значение: show | hide | inherit
Начальное значение: show
Область применения: элементы ‘table-cell’
Наследование: да
Процентное задание: не определено
Устройства: визуальные

В модели с отдельными границами это свойство управляет представлением границ вокруг ячеек, не имеющих видимого содержимого. Считается, что видимого содержимого нет в пустых ячейках и ячейках, для которых свойству ‘visibility’ присвоено значение ‘hidden’. Символы “&nbsp;” и другие символы, представляющие пустое пространство за исключением символов ASCII CR (“D”), LF (“A”), tab (“9”) и пробела (“20”), считаются видимым содержимым.

Если для этого свойства установлено значение ‘show’, вокруг пустых ячеек отображается граница (как вокруг обычных ячеек).

Значение ‘hide’ означает, что вокруг пустых ячеек не будет границ. Более того, если у всех ячеек в строке это свойство имеет значение ‘hide’, и ячейки не имеют видимого содержимого, вся строка будет выполняться согласно значению ‘display: none’.

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

TABLE { empty-cells: show }

Модель с пересекающимися границами

В модели с пересекающимися границами можно указывать границы, которые окружают ячейку, строку, группу строк, столбец или группу столбцов полностью или частично. Таким образом можно установить границы для атрибута HTML “rule”.

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

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

ширина_строки = (0.5 * ширина_границы0) + левое_поле_внутри_таблицы1
+ ширина1 + правое_поле_внутри_таблицы1 + ширина_границы1 +
левое_поле_внутри_таблицы2 +...+ правое_поле_внутри_таблицыn +
(0.5 * ширина_границыn)

Здесь n – количество ячеек в строке, а ширина-границыi – граница между ячейками i и i + 1. Обратите внимание, что в ширину таблицы включена только одна из двух внешних границ; другая граница находится в области поля.

Схема ширины ячеек, границ и полей внутри ячеек.

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

Разрешение конфликтов между границами

В модели с пересекающимися границами границы с каждого края ячейки могут задаваться свойствами различных элементов, располагающихся у края (ячейки, строки, группы строк, столбцов, группы столбцов и самой таблицы), и эти границы могут различаться по ширине, стилю и цвету. В этом случае для каждого края используется стиль границы, “приковывающий взгляд”, за исключением того, что граница не отображается, если используется стиль стиля ‘hidden’.

Какой тип границы “выиграет” в случае конфликта, определяется следующими правилами:

1. Границы, для свойства ‘border-style’ которых установлено значение ‘hidden’, имеют приоритет над всеми остальными конфликтующим границами. Все другие границы в указанном месте не отображаются.
2. У границ, имеющих стиль ‘none’, самый низкий приоритет. Только если свойства границ всех элементов, относящихся к этому краю, имеют значение ‘none’, границы не будет (но помните, что значение ‘none’ используется для стиля границы по умолчанию.)
3. Если ни один из стилей не имеет значение ‘hidden’ и хотя бы один из них имеет значение, отличное от ‘none’, “побеждают” более широкие границы. Если у нескольких границ свойства ‘border-width’ имеют одинаковые значения, стили применяются в следующем порядке: ‘double’, ‘solid’, ‘dashed’, ‘dotted’, ‘ridge’, ‘outset’, ‘groove’ и стиль с самым низким приоритетом ‘inset’.
4. Если стили границ отличаются только цветом, тогда стиль, заданный для ячейки, имеет приоритет над стилем строки, стиль строки – над стилем группы строк, столбца, группы столбцов и таблицы.

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

TABLE { border-collapse: collapse;
border: 5px solid yellow; }
*#col1 { border: 3px solid black; }
TD { border: 1px solid red; padding: 1em; }
TD.solid-blue { border: 5px dashed blue; }
TD.solid-green { border: 5px solid green; }

к коду HTML:

<P>
<TABLE>
<COL><COL><COL>
<TR>
<TD> 1
<TD> 2
<TD> 3
</TR>
<TR>


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

Пример таблицы с пересекающимися границами.

В следующем примере представлена таблица с горизонтальными линиями, разделяющими строки. Для верхней границы таблицы указано значение ‘hidden’, что обеспечивает отсутствие верхней границы первой строки. В результате будет использоваться атрибут “rules” HTML 4.0 (rules=”rows”).

TABLE[rules=rows] TR { border-top: solid }
TABLE[rules=rows] { border-collapse: collapse;
border-top: hidden }

Таблица с горизонтальными линиями, разделяющими строки.

В данном случае такой же результат можно получить, не указывая значения ‘hidden’ для границы всей ТАБЛИЦЫ, а только для первой строки. Можно использовать любой способ.

TR:first-child { border-top: none }
TR { border-top: solid }

Вот еще один пример пересекающихся границ:

Таблица с двумя отсутствующими внутренними границами.

HTML source:

<TABLE>
<TR><TD>foo</TD>
<TD>bar</TD></TR>
<TR><TD>foo</TD>
<TD>bar</TD></TR>
</TABLE>

Стили границ

Смысл некоторых значений свойства ‘border-style’ применительно к таблице и к другим элементам различен. В приведенном ниже списке такие значения помечены звездочкой.

none

Граница отсутствует.

*hidden

Аналогично значению ‘none’, но в модели с пересекающимися границами имеет приоритет над любыми другими границами (см. раздел о конфликтах между границами).

dotted

Граница представляется рядом точек.

dashed

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

solid

Граница представляется единым сегментом линии.

double

Граница представляется двумя сплошными линиями. Сумма толщины двух линий и

расстояния между ними равно значению ‘border-width’.

groove

Граница выглядит вдавленной.

ridge

В противоположность ‘groove’, граница выглядит выпуклой.

*inset

В модели с отдельными границами весь выглядит вдавленным. В модели с пересекающимися границами это значение дает тот же эффект, что и значение ‘groove’.

*outset

В модели с отдельными границами весь блок выглядит выпуклым. В модели с пересекающимися границами это значение дает тот же эффект, что и значение ‘ridge’.

Таблицы в CSS. Границы таблицы

Отображение границ ячеек

CSS позволяет установть не только стиль границы таблицы, но и стиль границ отдельных ячеек. Так как у каждой ячейки свои границы, то между соседними ячейками граница получается сдвоенная. Но существует возможность объединить границы соседних ячеек в одну. Для этого есть свойство border-collapse. Оно принимает значения:

border-collapse: separate — у каждой ячейки своя граница (по умолчанию)

border-collapse: collapse — общая граница

border-collapse: inherit — значение принимается от родительского элемента

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

Стиль:

+

td
  {
  border: 1px solid Red;
  }

HTML код:

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

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

Теперь установим таблице свойство border-collapse.

#t1
  {
  border-collapse: collapse;
  }

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

Расстояние между ячейками

CSS даёт возможность установить конкретное расстояние между ячейками таблицы. Для этого используется свойтсво border-spacing. Значением свойства является расстояние в единицах измерения CSS. Это свойство не работает, если установлено свойство border-collapse со значением collapse.

Создадим ещё одну таблицу и установим расстояние между ячейками:

Стиль:

#dis 
  {
  border-spacing: 10px;
  }

HTML код:

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

Свойству border-spacing можно указать два значения через пробел. При этом, первое значение — это расстояние по горизонтали, а второе — по вертикали.

Укажем созданной таблице разные расстояния. 17 строка будет выглядеть так:

border-spacing: 5px 15px;

Положение заголовка таблицы

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

caption-side: top — над таблицей (по умолчанию)

caption-side: bottom — под таблицей

Существуют другие значения, но они поддерживаются не всеми браузерами.

Добавим второй таблице заголовок и расположим его под таблицей:

<caption>Заголовок таблицы</caption>

Отображение пустых ячеек

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

empty-cells: show — ячейки видны (по умолчанию)

empty-cells: hide — ячейки не видны

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

Стиль:

#hid td
  {
  background-color: #909090;
  }

HTML код:

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

Пустая ячейка видна, у неё отображаются рамка и фон.

Теперь добавим таблице свойство empty-cells.

#hid 
  {
  empty-cells: hide;
  }

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

Используйте CSS для обработки стилей границ таблицы

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

Существует много способов отображения и стилизации таблиц. В этой статье я расскажу о методе использования CSS для стилизации границ таблиц.

ссылка

Модель таблицы CSS2 основана на модели таблицы HTML 4.01. Таблица содержит необязательный тег привязки, а также ячейки и строки данных. Модель таблицы содержит следующие элементы: таблица, привязка, строка данных, группа строк данных, столбец данных, группа столбцов данных и ячейка. Эта статья будет посвящена объяснению метода обработки границ каждого элемента в таблице.

рамка

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

TABLE { 5px solid black; }

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

l none: указывает, что таблица не имеет границы, поэтому ширина границы равна 0.

l пунктир: граница таблицы, состоящая из пунктирных линий.

l dashed: граница таблицы, состоящая из пунктирных линий.

l solid: граница таблицы состоит из сплошных линий.

l Двойной: граница таблицы состоит из двойных сплошных линий.

l Groove: граница эффекта Groove.

l ridge: граница эффекта ребра, противоположная эффекту линии слота.

l вставка: вогнутая граница эффекта.

l outset: рамка с внешним выпуклым эффектом, противоположная внутреннему вогнутому эффекту.

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

<html>

<head><title>HTML Table</title></head>

<style type="text/css">

TABLE {

background: blue;

border-collapse: separate;

border-spacing: 10pt;

border: 5px solid red; }

TD, TH {

background: white;

border: inset 5pt;

horizontal-align: right; }

CAPTION { border: ridge 5pt blue; }

</style><body>

<table summary="TechRepublic.com - Tables and CSS">

<caption>First Quarter Sales</caption>

<thead><tr>

<thabbr="salesperson" scope="col">Person</th>

<thabbr="sales" scope="col">Sales</th>

</tr></thead>

<tbody><tr>

<td>Mr. Smith</td>

<td>600.00</td>

</tr><tr>

<td>Mr. Jones</td>

<td>0000.00</td>

</tr><tr>

<td>Ms. Williams</td>

<td>0000.00</td>

</tr></tbody>

<tfoot><tr>

<td colspan="2">Let's sale, sale, sale!</td>

</tr></tfoot></table></body></html>

Список А

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

border: 5px solid red;

Определение атрибутов width, style и color объединено в этом утверждении, но вы также можете определить эти элементы по отдельности, как показано ниже:

border-width: 5px;

border-style: solid;

border-color: red;

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

<html><head><title>HTML Table</title></head>

<style type="text/css">

TABLE {

background: blue;

border-collapse: separate;

border-spacing: 10pt;

border-top: 15px solid red;

border-left: 15px solid red;

border-right: 5px dashed black;

border-bottom: 10px dashed blue; }

TD, TH {

background: white;

border: outset 5pt;

horizontal-align: right; }

CAPTION {

border: ridge 5pt blue;

border-top: ridge 10pt blue; }

</style><body>

<table summary="TechRepublic.com - Tables and CSS">

<caption>First Quarter Sales</caption>

<thead><tr>

<thabbr="salesperson" scope="col">Person</th>

<thabbr="sales" scope="col">Sales</th>

</tr></thead>

<tbody><tr>

<td>Mr. Smith</td>

<td>600.00</td>

</tr><tr>

<td>Mr. Jones</td>

<td>0000.00</td>

</tr><tr>

<td>Ms. Williams</td>

<td>0000.00</td>

</tr></tbody>

<tfoot><tr>

<td colspan="2">Let's sale, sale, sale!</td>

</tr></tfoot></table></body></html>

Список Б

Возможно, вы заметили, что граница всего элемента CAPTION определена как эффект синего 5-точечного гребня, а верхняя часть границы CAPTION установлена ​​в 10 точек. Если отдельные параметры рамки (слева, справа, сверху, снизу) отображаются сзади, исходные общие параметры границы будут перезаписаны.

Кроме того, в предыдущем примере путем назначения атрибута border элемента TABLE в таблице могут быть реализованы несколько границ (теги привязки, тело таблицы, заголовок таблицы, отдельные ячейки и т. Д.).

Интервал границы

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

Поведение формы

Свойство collapse границы устанавливает модель границы таблицы. Значение этого свойства по умолчанию является независимой моделью границы. Отдельная модель границы использует свойство border-spacing в качестве промежутка между различными границами. В качестве фона заливки используется элемент таблицы.

Для каркасной модели консорциум World Wide Web определяет следующие правила для разрешения конфликтов в стилях таблиц:

Границы, использующие атрибут скрытой границы, имеют приоритет над другими атрибутами границы. Любая граница, использующая скрытый атрибут, имеет более высокий приоритет обработки, чем другие атрибуты границы.

l Используйте границу «без стиля», чтобы иметь самый низкий приоритет. Если атрибут границы всех элементов в одной позиции — «без стиля», граница таблицы будет игнорироваться. (Обратите внимание, что для стиля рамки по умолчанию используется стиль «без стиля».)

Если ни один из стилей не установлен на «скрытый» и хотя бы для одного стиля не задан «никакой стиль», широкие границы имеют приоритет над тонкими. Приоритет стиля границы следующий: двойная сплошная линия, одна сплошная линия, пунктирная линия, пунктирная линия, линия ребра, выпуклость, линия канавки, а самый низкий уровень — вогнутый.

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

рамка

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

Вы фанат CSS? Какие параметры вы использовали для стиля таблицы HTML? Пожалуйста, поделитесь своим опытом в области обсуждения статьи.

Статья перепечатана и источник не может быть запрошен.

Таблицы и границы | HTML/xHTML

Сколько бы ни хвалились производители суперплоских мониторов, всегда есть сила, действующая в обратном направлении: это программисты, которые никак не могут примирится с двумерностью экрана и на каждом шагу скандируют: «даёшь 3D!».

Псевдотрехмерность окружает нас везде: где надо и не надо. Если, к примеру, button по определению должен выпирать из монитора, то в чем провинились безобидные hr и table? Первый уже рассматривался в заметке № 12, теперь поговорим о том, как на корню убить трехмерность последнего.

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

<table bgcolor=black border=0 cellpadding=2 cellspacing=1 width=100>
<tr>
<td bgcolor=white>&nbsp;</td>
<td bgcolor=white>&nbsp;</td>
</tr>
<tr>
<td bgcolor=white>&nbsp;</td>
<td bgcolor=white>&nbsp;</td>
</tr>
</table>

Милостивый читатель спросит: а почему нельзя поместить bgcolor=white сразу в тэг tr, тем самым значительно сжав код? На что автор ответит: а потому, деточка моя, что двоечник по рендерингу NN6 окрасит всю строку белым цветом, и плакали наши вертикальные рамочки.

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

Идея подсмотрена в исходниках Студии Лебедева и принципиально не отличается от предыдущей: полностью включаем исходную таблицу во внешнюю, для которой и прописываем нужный bgcolor.

<table bgcolor=black border=0 cellpadding=0 cellspacing=0 width=100><tr><td>
<table bgcolor=white border=0 cellpadding=2 cellspacing=1>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</td></tr></table>

Код значительно полегчал, хвала кодерам Студии Лебедева. Но и этот способ не лишен недостатков: попробуйте распечатать такую таблицу на принтере. Получилось? Фигушки, потому что Internet Explorer по умолчанию не печатает цвета и рисунки фона.

«Прежде чем распечатать эту страницу, пожалуйста, зайдите в меню Сервис, выберите пункт Свойства обозревателя, откройте вкладку Дополнительно и в разделе Печать отметьте галочку Печатать цвета и рисунки фона. Спасибо». Хватит бредить, лучше покланяемся в ножки CSS:

Действительно, что нам мешает указать каждой ячейке свойство border?

td{
border: solid black 1px
}

А то, мои дорогие, что таким образом на месте соприкасания ячеек получится рамка толщиной в два пикселя. По спецификации, эту проблему должно решать свойство border-collapse со значением collapse. В этом случае соседние границы должны «проглатывать» друг друга. Оставим это счастье нашим внукам, потому что нынче ни один браузер это свойство не поддерживает. Отсюда вытекает…

По-научному это называется разделением труда:

table.border td, table.border th{
border-color: black;
border-style: solid;
border-width: 1px 0 0 1px
}

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

Примечание Александра Шуркаева. На самом деле, CSS свойство border-collapse полностью (значения separate и collapse) поддерживается IE5+, NN6/Mozilla, Opera 4+, что вполне оправдывает его использование. Учтите только, что задавать свойство border-collapse необходимо при декларации тега table, в то время как бордер задаётся при описании ячеек:

table.border td, table.border th{
border:1px solid #CC0000
}

Html как убрать границы таблицы

Как удалить границу из таблицы при печати с помощью css @media print

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

это мой код css:

этот css дал мне этот результат:

Нижняя граница таблицы остается показной. Как я могу удалить ее. Спасибо u

задан Errabi Ayoub 06 янв. ’17 в 12:36

Удаление границ нежелательной таблицы с помощью CSS

У меня есть своеобразная и неприятная проблема. Для простой разметки:

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

Я хотел бы знать, как удалить эти границы в других основных браузерах, так что единственное, что вы видите в таблице, это чередующиеся цвета строк.

Как удалить нижнюю границу из последней строки в моей таблице html?

Как мне удалить нижнюю границу из последней строки в моей таблице HTML?

Вот CSS:

Вот быстрая скрипка: http://jsfiddle.net/tZ9cA/

задан user1451890 19 марта ’14 в 19:11

Как удалить границу последней строки таблицы

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

Я пробовал это, сделав таблицу border = ‘0’ в CSS, а затем давая border = ‘1’ для каждого tr, кроме последней строки. Он отлично работает в хромированном и сафари, но не в IE11.

Есть ли лучший способ сделать это, чтобы он поддерживал и в IE11?

задан Juliee 18 мая ’16 в 19:43

Таблицы HTML | Все об HTML: Компания VBizSoft: IT консалтинг и разработка решений для бизнеса

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

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

</TR>
</TABLE>

<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>

<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 тег thead

Пример

Таблица HTML с элементами, и:

Дополнительные примеры «Попробуйте сами» ниже.

Определение и использование

Тег используется для группировки содержимого заголовка в таблице HTML.

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

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

Примечание: Элемент должен иметь один или несколько Теги внутри.

Тег должен использоваться в следующем контексте: Как дочерний элемент

Совет: Элементы

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

Глобальные атрибуты

Тег также поддерживает глобальные атрибуты в HTML.

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

Тег также поддерживает атрибуты событий в HTML.

Другие примеры

Пример

Стиль, и с CSS:

table, th, td {
border: 1px сплошной черный;
}

Пример

Как выровнять содержимое внутри (с помощью CSS):

<таблица>


Месяц
Экономия




январь
100


февраль
80 долларов

Пример

Как выровнять содержимое по вертикали внутри (с помощью CSS):

<таблица>


месяц
Экономия




январь
100


февраль
80 долларов

Настройки CSS по умолчанию

Большинство браузеров отображают элемент со следующими значениями по умолчанию:

thead {
display: таблица-заголовок-группа;
vertical-align: middle;
цвет границы: наследование;
}

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

Эта страница содержит HTML-код границы таблицы — HTML-коды для указания или изменения границы ваших таблиц в вашем блоге или на веб-странице.

HTML задаются с помощью каскадных таблиц стилей (CSS). Чтобы установить границу таблицы HTML, используйте свойство CSS border .

Типичная граница стола

Вот обычный способ установить границы на столе:

стол { граница-коллапс: коллапс; } td, th { граница: сплошной оранжевый 1px; }

Это обеспечивает эффект «сетки», когда граница окружает каждую ячейку, а также всю таблицу.

Как это:

<стиль> стол { граница-коллапс: коллапс; } th, td { граница: сплошной оранжевый 1px; отступ: 10 пикселей; выравнивание текста: слева; } <таблица> Заголовок таблицы Заголовок таблицы Заголовок таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы

Обратите внимание, что я использовал border-collapse: collapse; против элемента table .Это сворачивает границу, так что вы не видите никакого пространства между ячейками и внешней стороной таблицы.

Без обрушения границы

Вот это без обрушения границы . Я также применил границу к элементу таблицы , чтобы продемонстрировать эффект:

<стиль> table, th, td { граница: сплошной оранжевый 1px; } th, td { отступ: 10 пикселей; } <таблица> Заголовок таблицы Заголовок таблицы Заголовок таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы

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

Итак, мы получили это:

<стиль> table, th, td { граница: сплошной оранжевый 1px; отступ: 10 пикселей; } <таблица> Заголовок таблицы Заголовок таблицы Заголовок таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы

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

Нижняя граница

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

Если вы не хотите, чтобы граница охватывала всю таблицу (или если вам нужна другая граница с каждой стороны таблицы), вы можете использовать любое из следующих свойств: border-top , border-right , граница снизу и граница слева .

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

<стиль> table.bottomBorder { граница-коллапс: коллапс; } table.bottomBorder td, table.bottomBorder th { нижняя граница: сплошной желто-зеленый цвет размером 1 пиксель; отступ: 10 пикселей; выравнивание текста: слева; } <таблица> Заголовок таблицы Заголовок таблицы Заголовок таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы

Граница и чередование цветов фона

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

Вы можете применить границы к этим таблицам, как и к любой другой таблице:

<стиль> стол { граница-коллапс: коллапс; } th, td { граница: 1px solid #ccc; отступ: 10 пикселей; выравнивание текста: слева; } tr: nth-child (even) { цвет фона: #eee; } tr: nth-child (odd) { цвет фона: #fff; } <таблица> Заголовок таблицы Заголовок таблицы Заголовок таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы

Без границ в заголовках таблиц

Вы также можете удалить границу с элемента th .

Вы можете удалить границу из стилей, используя border: none; против -го селектора (но он должен следовать за объявлением границы) или просто не применять границу в первую очередь.

Вот пример более позднего:

<стиль> стол { граница-коллапс: коллапс; } td { граница: 1px solid #ccc; } th, td { отступ: 10 пикселей; выравнивание текста: слева; } tr: nth-child (even) { цвет фона: #eee; } tr: nth-child (odd) { цвет фона: #fff; } <таблица> Заголовок таблицы Заголовок таблицы Заголовок таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы

Закругленные углы

Вот пример добавления к таблице границы с изогнутыми / закругленными углами.В спецификации CSS3 закругленные углы указываются с помощью свойства border-radius .

Обратите внимание, что для этой работы нам нужно удалить свойство border-collapse .

Я также установил свойство border-spacing на ноль, чтобы границы ячеек продолжались плавно, не прерываясь пробелом. Удалите это свойство и нажмите Выполнить , чтобы понять, что я имею в виду.

<стиль> стол.закругленные углы { граница: 1px solid DarkOrange; радиус границы: 13 пикселей; граница-интервал: 0; } стол. закругленные углы тд, table.oundedCorners th { нижняя граница: сплошной 1px DarkOrange; отступ: 10 пикселей; } table.oundedCorners tr: last-child> td { нижняя граница: нет; } <таблица> Заголовок таблицы Заголовок таблицы Заголовок таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы

Недвижимость на границе

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

Чтобы получить полный список свойств границы, перейдите в Свойства CSS и отфильтруйте по «границе».

HTML | Атрибут border

Атрибут HTML

Синтаксис:

Вниманию читателя! Не прекращайте учиться сейчас. Освойте все важные концепции HTML с помощью Web Design for Beginners | HTML курс.

Значения атрибутов:

• 1: Устанавливает границу вокруг ячеек таблицы.
• 0: Удаляет (не устанавливает) границу вокруг ячеек таблицы.

Пример:

Вывод:

Поддерживаемые браузеры: Браузер, поддерживаемый рамкой HTML

• Google Chrome
• Internet Explorer
• Firefox
• Safari
• Opera

HTML / теги таблицы / граница таблицы - индекс TAG

Атрибут границы элемента ТАБЛИЦА определяет ширину границы таблицы.

Значение можно не указывать. (Ширина границы становится такой же, как у размера 1.)
<граница таблицы>

Это можно указать с помощью CSS. Подробную информацию о CSS см. В «Связанном документе».

Пример

 
  <рамка таблицы> 

 Ячейка A 
 Ячейка B 
 Ячейка C 

    
 

Выход

 
   
 

 Ячейка A 
 Ячейка B 
 Ячейка C 

 
  
 

Выход

 
   
 

 Ячейка A 
 Ячейка B 
 Ячейка C 

 
  
 

Выход

 
   
 

 Ячейка A 
 Ячейка B 
 Ячейка C 

 
  
 

Выход

 
   
 

 Ячейка A 
 Ячейка B 
 Ячейка C 

 
  
 

Выход

Связанный документ

Примеры границ и правил таблиц

Несколько примеров.Заполнение опущено для ясности. Также примеры с альтернативным синтаксисом.

Пример 1

Соответствует правилу HTML3 = all, border = 1.

 td, th {border: 1px solid}
 

Пример 2

Второй пример из спецификации HTML3. (интерпретируется из графики ASCII).

 стол {
    граница-верх: двойная;
    нижняя граница: двойная;
    граница-право: пусто
}
thead, tbody, tfoot {
    верхняя граница: сплошная;
    нижняя граница: сплошная
}
colgroup {
    граница справа: сплошная
}
 

Пример 3

А таблица только с вертикальными правилами.

 col {
    граница слева: сплошная;
    граница справа: сплошная
}
 

Пример 4

Таблица только с вертикальными линиями между столбцами.

 col {border-left: solid}
таблица {border-left: blank}
 

Пример 5

Типичная таблица Netscape: border = 5, cellspacing = 10.

 таблица {border: 16px ridge (5,10,1)}
td, th {border: 12px ridge (1,10,1)}
 

NB1. 16 = 5 пикселей границы + 10 пикселей + 1 пиксель тени.Сходным образом, 12 = интервал 10 пикселей + 2 тени.

NB2. В этом случае удобно указать гребень как 1,10,1, что в сумме равно 12, но 2,20,2 дало бы точно такой же результат.

Пример 6

Сложная столовая голова, но без правил в теле.

 thead {
    бордюр-верх: сплошной толстый;
    граница справа: пусто; / * предотвращаем границу colgroup * /
    border-left: blank / * запретить границу ячейки * /
}
colgroup {border-right: сплошной толстый}
thead td {граница: твердое тело}
tbody td {border: blank} / * удалить границу colgroup * /
}
 

Этот пример сложен, потому что нет способа обратиться к части colgroup в thead.Похоже, для этого нам понадобится оператор пересечения сортировки. В этом случае проблема была решена путем установки границы для всей группы colgroup, а затем ее повторного удаления в tbody.

Пример 7

Пример Криса Уилсона 1 в его обозначениях:

 таблица {border: 2px начальный серый / темно-серый; отступ: 1px}
td {border: тонкая вставка серый / темно-серый; margin: 1px}
 

В моих обозначениях:

 таблица {border: 5px ridge (2,2,1)}
td {border: 4px ridge / * подразумевается: (1,2,1) * /}
 

Предполагая, что «тонкий» означает 1 пиксель (что не слишком маловероятно), граница таблицы будет иметь вид 2 пикселя тени + 1 пиксель отступа + 1 пиксель поля + 1 пиксель тени = 5 пикселей.Обратите внимание, что я также предполагаю, что цвета теней выбираются автоматически.

Пример 8

Пример Криса Уилсона 2. В его обозначениях:

 таблица {border: 2px начальный серый / темно-серый; отступ: 1px}
tr {border: тонкая вставка серый / темно-серый; margin: 1px}
 

В моих обозначениях:

 таблица {border: 5px ridge (2,2,1)}
tr {border: 4px гребень}
 

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

Пример 9

Пример Криса Уилсона 3. В его обозначениях:

 таблица {border: 2px начальный серый / темно-серый; отступ: 4 пикселя}
td {border: тонкая вставка серый / темно-серый; margin: 4px}
 

В моих обозначениях:

 таблица {border: 11px ridge (2,8,1)}
td {border: 10px ridge (1,8,1)}
 

Пример 10

Пример Криса Уилсона 4. В его обозначениях:

 таблица {border: 2px одинарный черный}
td {border: тонкий одиночный черный коллапс}
 

В моих обозначениях:

 таблица {border: 2px сплошной черный}
td {border: тонкий сплошной черный}
 

Пример 11

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

 таблица {border: тонкие тени (толстые)}
тд {граница: тонкая пунктирная}
#G {border: тонкие тени (толстые) перекрывают}
 

Предполагается, что ячейка G имеет идентификатор «G». Ключевое слово override используется для того, чтобы обеспечить соблюдение стиля границы ячейки. Если тени всегда «сильнее» точек, это ключевое слово можно опустить.

Пример 12

Разница в цвете между рамкой и ячейкой - проблема.Оно может можно решить несколькими способами: (1) в HTML, поместив содержимое ячейки внутрь другой элемент, такой как P или DIV, и поместив на него фон, или (2) введение свойства border-background или (3) указание того, что таблица background используется для фона границы.

Решение 1 не работает, если дочерние элементы имеют неравную высоту. С раствором 2 и 3, пунктирному стилю требуется дополнительный параметр, который уже был предложен ранее, чтобы установить диаметр точки.

Используя решение 2 (установите желтый цвет на дочерние элементы ячеек):

 тело {фон: розовый}
таблица {border: none}
td {border: 5pt, зеленые точки (8pt, 0.8)}
тд п {фон: желтый}
 

Используя решение 3 (для границ используется фон таблицы):

 тело {фон: розовый}
таблица {border: none}
td {border: 5pt с зелеными точками (8pt.0.8)}
тд {фон: желтый}
 

Используя модель Дэйва:

 тело {фон: розовый}
стол {
    правила: все;
    стиль правила: пунктирный;
    правило-цвет: зеленый;
    ширина правила: 5pt
}
td {
    маржа: 2 пункта;
    фон: желтый
}
 

Пример 13

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

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

Попытка использовать модель Дэйва:

 стол {
    правила: все;
    стиль правила: сплошная пунктирная линия;
    ширина правила: 5pt 2pt;
    правило-цвет: зелено-белый;
    / * Как подавить правило под заголовком? * /
}
thead td {
    стиль границы: нет нет сплошной нет;
    ширина границы: толстая;
    цвет границы: красный;
    маржа: 4 пункта;
}
 

Попытка использовать мою модель:

 col {
    border-left: зеленый, пунктирный, 5 пунктов;
    border-right: зеленый, пунктирный, 5 пунктов;
}
tbody tr {
    верхняя граница: сплошной белый 3pt
}
thead td {
    / * Представляем "короткий" стиль * /
    нижняя граница: короткие 5 пунктов (4 пункта) сплошной красный
}
 

Пример 14

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

 td {border: thin solid}
thead {shear: -30}
thead td {text-rotation: 90}
 

Пример 15

Есть несколько способов взглянуть на эту таблицу: (1) на самом деле это две таблицы вместо одного, (2) между головой и телом есть пространство, (3) между голова и тело - двойная линия.

Используя 3 (и предполагая, что фон границы взят из фона таблицы):

 tr {border:.4pt}
таблица {граница: толстая сплошная}
thead {border: 14pt double (1,12,1)}
thead {background: cyan}
tr.odd {фон: желтый}
tr.even {фон: голубой}
 

Пример 16

Короткие горизонтальные линейки между ячейками.

 td, th {border-bottom: thin short}
table {border: none} / * убрать нижнюю границу * /
 

По умолчанию для "short" может быть заполнение ячейки.

Пример 17

Одиночная черная кайма на теле, белая (или прозрачная) кайма в голове.(На самом деле, в оригинале синие части были не совсем выровнены, они казались быть помещенным неустойчивой рукой.)

границ таблицы HTML без CSS

Создание визуальных границ в таблицах HTML без CSS и без рамки Атрибут таблицы HTML :

HTML код:

 
< таблица  cellspacing = " 3 " bgcolor = " # 000000 ">
< tr  bgcolor = " #ffffff ">
< th > Заголовок </  th >
< th > Заголовок </  th >
</  tr >
< tr  bgcolor = " #ffffff ">
< td > Данные </  td >
< td > Данные </  td >
</  tr >
</  стол >
  

Границы таблицы HTML без CSS

Некоторое время назад, в основном (но не только), в 1990-х годах для достижения того, что теперь делается с помощью CSS, использовалось несколько чистых HTML-трюков.Одним из них была обработка визуальных границ таблицы HTML.

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

Концепт

1. Атрибут Bgcolor тега table используется для того, чтобы сделать его фон определенного цвета.
2. Атрибут Bgcolor тега tr используется для придания фону содержимого таблицы (то есть строкам и ячейкам) определенного цвета, отличного от фона таблицы.
3. Cellspacing Атрибут таблицы Тег используется для создания пространства вокруг ячеек таблицы. Это пространство получает цвет, установленный атрибутом bgcolor тега table, и, поскольку он отличается от фона строк и ячеек, это создает визуальную границу цвета фона таблицы вокруг ячеек.

Древние Netscape, Mozilla и Arachne

Метод обработки границ таблицы HTML без CSS существует с первых дней Интернета, настолько, что с некоторыми настройками он работает в Netscape 3.04 - 6.0, Mozilla 0.6 - 1.7.13 и веб-браузере Arachne для DOS:

HTML код:

 
< таблица  cellspacing = " 0 " cellpadding = " 0 " border = " 0 " bgcolor = " # 000000 ">
< tr >
< td >
< table  cellspacing = " 3 " border = " 0 ">
< tr  bgcolor = " #ffffff ">
< th > Заголовок </  th >
< th > Заголовок </  th >
</  tr >
< tr  bgcolor = " #ffffff ">
< td > Данные </  td >
< td > Данные </  td >
</  tr >
</  стол >
</  td >
</  tr >
</  стол >
  

Примечание: этот скорректированный код работает так же хорошо не только в Netscape 3.04 - 6.0, Mozilla 0.6 - 1.7.13 или Arachne, но также и во всех веб-браузерах, перечисленных в разделе «Поддержка браузеров» ниже: как в современных, так и в старых.

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

Окна

Internet Explorer 3.0+

Firefox 1.0+

Google Chrome

Opera 2.12+

Safari 3.1+

SeaMonkey 1.0+

Mozilla 1.0+

Netscape 7.0+

Linux

Firefox 1.0+

Google Chrome / Chromium

Opera 5.0+

SeaMonkey 1.0+

Mozilla 1.0+

Netscape 7.0+

NetSurf 3.0

Дилло 3.0.2

Подробнее

Использование CSS для добавления внутренних границ в таблицу HTML

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

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

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

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

Перед началом работы

Решите, где вы хотите, чтобы линии отображались в таблице. У вас есть несколько вариантов, в том числе:

• Окружение всех ячеек в виде сетки
• Размещение строк только между столбцами
• Только между строками
• Между определенными столбцами или строками.

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

Вам также нужно будет добавить свойство border-collapse в свой CSS для вашей таблицы. Это сведет границы к одной линии между каждой ячейкой и позволит границам строк таблицы функционировать должным образом. Прежде чем что-либо делать, добавьте следующий блок в свой CSS.

таблица {
 граница-обрушение: обрушение; 
} 

Как добавить линии вокруг всех ячеек в таблице

Чтобы добавить линии вокруг всех ячеек в таблице, создав эффект сетки, добавьте в таблицу стилей следующее:

Как добавить строки только между столбцами в таблице

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

Если вы не хотите, чтобы вертикальные линии появлялись в первом столбце, вы можете использовать псевдокласс first-child для нацеливания только на те элементы, которые появляются первыми в их строке, и удалить границу.

td: first-child, th: first-child {
 граница слева: нет; 
} 

Как добавить строки только между строками в таблице

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

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

tr: последний-дочерний {
 нижний край: нет; 
} 

Как добавить строки между определенными столбцами или строками в таблице

Если вам нужны только строки между определенными строками или столбцами, вы можете использовать класс для этих ячеек или строк. Если вы предпочитаете немного более чистую разметку, вы можете использовать псевдокласс nth-child для выбора определенных строк и столбцов в зависимости от их положения.

Например, если вы хотите настроить таргетинг только на второй столбец в каждой строке, вы можете использовать nth-child (2), чтобы применить CSS только ко второму элементу в каждой строке.

td: nth-child (2), th: nth-child (2) {
 border-left: сплошной 2px красный; 
} 

То же самое и со строками. Вы можете настроить таргетинг на конкретную строку, используя nth-child .

tr: nth-child (4) {
 border-bottom: сплошной зеленый цвет 2 пикселя; 
} 

Как добавить линии вокруг отдельных ячеек в таблице

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

Затем добавьте следующий CSS в свою таблицу стилей:

Как добавить строки внутри отдельных ячеек в таблице

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