Граница таблицы в html: Атрибут border | htmlbook.ru - Блог сумасшедшего сисадмина

seodon.ru | Учебник HTML — Границы, рамки и отступы HTML-таблиц

Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

Мы уже выяснили с вами, что у HTML-таблиц есть рамки, хотя по умолчанию их браузеры и не показывают. Но это еще не все, у каждой ячейки таблицы тоже есть рамка, которая называется граница ячейки. Но и это еще не все, используя специальные атрибуты тега <TABLE> можно изменять расстояния между ячейками и от ячеек до рамки таблицы, а также внутренние отступы от границ ячеек до их содержимого.

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

Итак, для создания рамки HTML-таблицы и границ ее ячеек используется всего один атрибут тега <TABLE> — border. Значением атрибута являются целые неотрицательные числа (ноль по умолчанию), которые означают размер в пикселях. Но, внимание, размер изменяется только у рамки таблицы, у границ ячеек он всегда неизменен.

 <table border="число">...</table>

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

<table cellspacing="число">...</table>

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

<table cellpadding="число">...</table>

Обратите внимание, что браузеры по умолчанию устанавливают небольшие (в два пикселя) значения cellspacing и cellpadding, поэтому чтобы убрать расстояния вовсе — установите у атрибутов значения ноль (0).

Пример границ, рамок и отступов HTML-таблиц

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict. dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Границы, рамки и отступы таблиц</title>
</head>
<body>
 <p>Таблица с измененными отступами и расстояниями:</p>
 <table border="5" cellspacing="10" cellpadding="15">
  <tr><td>Ячейка 1.1</td><td>Ячейка 1.2</td><td>Ячейка 1.3</td></tr>
  <tr><td>Ячейка 2.1</td><td>Ячейка 2.2</td><td>Ячейка 2.3</td></tr>
  <tr><td>Ячейка 3.1</td><td>Ячейка 3.2</td><td>Ячейка 3.3</td></tr>
 </table>
 
 <p>Таблица только с установленными рамкой и границами ячеек:</p>
 <table border="5">
  <tr><td>Ячейка 1.1</td><td>Ячейка 1.2</td><td>Ячейка 1.3</td></tr>
  <tr><td>Ячейка 2.1</td><td>Ячейка 2.2</td><td>Ячейка 2.   3</td></tr>
  <tr><td>Ячейка 3.1</td><td>Ячейка 3.2</td><td>Ячейка 3.3</td></tr>
 </table>
 </body>
</html>

Результат в браузере

Таблица с измененными отступами и расстояниями:

Ячейка 1.1	Ячейка 1.2	Ячейка 1.3
Ячейка 2.1	Ячейка 2.2	Ячейка 2.3
Ячейка 3.1	Ячейка 3.2	Ячейка 3.3

Таблица только с установленными рамкой и границами ячеек:

Ячейка 1.1	Ячейка 1.2	Ячейка 1.3
Ячейка 2.1	Ячейка 2.2	Ячейка 2.3
Ячейка 3.1	Ячейка 3.2	Ячейка 3.3

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

Согласно синтаксиса HTML, браузеры прибавляют значения cellspacing и cellpadding к размерам таблицы и ее ячеек. Например, если вы установите ширину ячейки в 100 пикселей и cellpadding=»10″ — браузеры прибавят к ширине 20 пикселей (по 10 слева и справа) и она станет равна 120 пикселей. В общем, по ходу дела разберетесь.

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

В свое время у тега <BODY> существовало четыре атрибута, которые устанавливали размер этих отступов для каждой стороны страницы: topmargin (сверху), rightmargin (справа), bottommargin (снизу) и leftmargin (слева). Сейчас эти атрибуты устарели, поэтому будем применять стили (CSS). Итак, изменить расстояния отступов по краям страницы можно несколькими способами, я покажу вам два, а о третьем узнаете, если решите изучать CSS.

Способ первый. B теге <BODY> указать атрибут style со следующими значениями:

<body>. ..</body> — убирает отступы сразу со всех сторон HTML-страницы.

<body>…</body> — регулирует размер отступов для каждой стороны по часовой стрелке. Как правило используются размеры в пикселях, например: <body style=»margin:5px 3px 4px 5px»>…</body>

Второй и более удобный способ. В теге <STYLE>, с которым вы познакомились в уроке Меняем цвета ссылок, добавить еще одну строчку:

<style type="text/css">
...
body {margin:0}
</style>

Или:

 <style type="text/css">
...
body {margin:сверху справа снизу слева}
</style>

Домашнее задание.

В этом уроке я тоже не буду все подробно описывать — только общие моменты. Для полноты картины посмотрите результат примера.

Создайте три таблицы, каждая должны состоять из одной строки и трех столбцов (колонок).
В первой таблице разместите Header или «шапку» страницы (не путать с «шапкой» HTML-документа), во второй — левое и правое меню, а также основное содержимое (контент), в третьей — Footer или «подвал» страницы.
Пусть ширина первого и последнего столбца каждой таблицы будет фиксированная.

Важно. Используйте тег <IMG> только для создания четырех кнопок горизонтального меню в «шапке» страницы. В остальных случаях пусть изображения идут фоном, а во вторых ячейках таблиц вообще используются только цвета, причем в первой и последней таблице это #99FF99.
Пусть текст контента страницы будет выровнен по обеим сторонам ячейки таблицы, а заголовок располагается по центру.
Что касается расстояний между ячейками таблиц, а также отступов ячеек, то думайте сами, где их надо совсем убрать, а где — увеличить.

Посмотреть результат → Посмотреть ответ

Таблицы

← Содержание →

Объединение ячеек таблицы

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

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

Header	Header
Data	Data

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>

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

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

Общая идея

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

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

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

Header	Header
Data	Data

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 выравнивание по центру

Как сделать рамкой только одну ячейку в HTML-таблице или только одну сторону ячейки?

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

Для таблиц HTML вы можете использовать атрибут border , чтобы предложить ширину границы вокруг таблицу и каждую ячейку. Есть другие методы, определенные в HTML 4, чтобы предложить границы ячеек (или «правила», как их там называют) как отдельный от общей границы для всей таблицы. Такие методы не работа напр. на Netscape 4, например, и, кроме того, они не могут использоваться, чтобы предположить, что границы должны появляться только вокруг одной ячейки, или даже только на одной стороне или на некоторых сторонах клетки. В этом документе кратко обсуждаются некоторые приемы работы с HTML, такие как вложенные таблицы, которые могут использовать, а затем использовать более разумный подход к таблице стилей (CSS).

Взлом HTML: вложенные таблицы

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

 <граница таблицы = "1" Cellspacing = "0" CellPadding = "4">
 один два три

Вот как это выглядит в вашем браузере:

один

два

три

Расстояние между ячейками и набивка атрибуты в основном не имеют отношения к нашему обсуждению, хотя вы, вероятно, хотите настроить их значения в соответствии с содержимым вашей таблицы. Но обратите внимание, что использование стиля листов, вы можете предложить свойства заполнения для отдельной ячейки, если хотите. Таким образом, вы могли бы, например. установите cellpadding на ноль и используйте Свойства заполнения CSS предлагать отступы, которые вам нравятся, подразумевая, что в В ситуациях просмотра без CSS не будет отступов.

Теперь давайте сначала предположим, что мы хотели бы удалить границы, кроме тех, вокруг второй клетки. В HTML нет прямого способа сделать это. Но один из возможных подходов — установить border="0" и построить границу для второй ячейки, сделав содержимое ячейки одноячейкой таблица с собственной границей:

 <граница таблицы = "0" Cellspacing = "0" CellPadding = "4">
 один
     
        два
     три

Вот как это выглядит в вашем браузере:

один

три

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

Что делать, если вы хотите изменить внешний вид границы: его цвет и форма? Ну, используя модификацию трюка с вложенными таблицами, вы можете сделать границу сплошной и иметь конкретный цвет . (Конечно, с обычными предостережениями; браузер может быть настроен на игнорирование цветов, предлагаемых на страницах, или монитор может быть неспособен отобразить предложенный цвет и т. д.) Идея состоит в том, чтобы использовать прокладка внутри ячейки для создания впечатления цветной рамки. Это означает, что вы должны использовать border="0" для внутренней таблицы. тоже но пользуйся ненулевое значение cellpadding для внешней таблицы, чтобы создать некоторую рамку пространство между содержимым ячейки (внутренней таблицей) и невидимым (или нулевой ширины, как вам нравится) граница ячейки, и bgcolor атрибуты для окраски этого пространства.

 <граница таблицы = "0" Cellspacing = "4" CellPadding = "2">
 один
     
         Вот как это выглядит в вашем браузере:

        два
        
     три  
 
 один  три
 Это несколько сложно. Обратите внимание, что атрибут  cellpadding  внешней таблицы   указывает ширину «границы», тогда как  атрибут cellpadding  для внутренней таблицы определяет заполнение
вокруг его содержания. Атрибут  bgcolor  для ячейки
(  "#ffffff"  , т.е. белый в нашем примере)
обычно должен быть таким же, как общий фон страницы или таблицы
цвет фона, но это , может и  другой, конечно,
если вы хотите добиться особого эффекта.
 Все становится еще сложнее, если вы хотите сделать просто  одна сторона  или только несколько сторон ячейки с рамкой.
Давайте рассмотрим простой случай, когда вы хотели бы иметь границу только на  слева  сторона камеры. Тогда вы могли бы
просто добавьте в таблицу «фиктивную ячейку» и
попробуйте сделать эту ячейку похожей на рамку – например, шириной в два пикселя
пустая ячейка с темно-зеленым фоном. Это вызывает некоторые проблемы, но
они обсуждаются отдельно в документе  Пустые ячейки в таблицах HTML  , так что здесь мы просто используем
техника объяснена там:
 <граница таблицы = "0" Cellspacing = "4" CellPadding = "0">
 один
     <изображение
        src=". ./images/transp.gif" alt="">
     два
     три
 
 Вот как это выглядит в вашем браузере:
 один  два  три
 Обратите внимание, что  cellpadding  был установлен на ноль,
так как этот атрибут влияет
«пустая ячейка» тоже, и ненулевое значение будет
сделать его шире, чем вы хотите. (Если вы используете   например, браузер мог бы еще,
вполне осмысленно, используйте более широкую ячейку, если только требования к заполнению ячейки
сделать это необходимым.) Таким образом, расстояние между содержимым ячейки, включая
«фиктивная» ячейка и ее соседи, происходит от  интервал ячеек  атрибут один. Это может вызвать проблемы, так как  Cellspacing  влияет и в вертикальном направлении, поэтому расстояние между  строками  может стать слишком большим. Как вы можете догадаться, можно использовать вложенные таблицы
как обходной путь. (Вы можете сделать содержимое ячейки таблицей, состоящей только из
фиктивной ячейки и реального содержимого ячейки.) Но я думаю, что пришло время
перейти к методам, которые по своей сути не являются такими хакерскими, хотя они тоже
потребуются некоторые хитрости, если вы хотите добиться максимального охвата браузера.
 Использование таблиц стилей (CSS),
в принципе очень легко предложить границы ячейки.
Вы просто назначите ему правило таблицы стилей, используя  свойство границы  или связанные свойства.
Использование «встроенной» таблицы стилей в атрибуте стиля   (не лучший способ, но для нашей иллюстрации сойдет), можно написать
всего
  <тд> 
  Вы бы не использовали  атрибут границы  в HTML,
ожидая, что граница по умолчанию будет равна нулю,
или вы можете явно написать 
 . Примечание
что в спецификациях цвета в CSS вы можете использовать удобные короткие формы, такие как  #060  вместо  #006600  (что также допустимо в CSS). 
 Если вы хотите, чтобы рамка располагалась только слева, вы должны
просто используйте  border-left  вместо  border  там.
 Вот простой тест с левой границей, предложенной для второй ячейки:
 
 один  два  три
 Если вы используете, скажем, Internet Explorer 4 или Opera 4, вы
вероятно, увидите там границу, если только настройки вашего браузера не запрещают это.
В Netscape 4 вы этого не сделаете. С другой стороны, вы могли бы быть совершенно
удовлетворен тем, что ваша таблица отображается предпочтительным образом в большинстве просмотров
ситуациях и без этой границы в меньшинстве случаев. (В конце концов, вы можете
никогда  управляют  такими вещами, как автор, во всяком случае. ) Тогда вы можете
Держите свою разметку и таблицу стилей простыми, красивыми и логичными.
 Но можно покрыть и Netscape 4 с некоторыми дополнительными
сложность. Среди многих
ошибок в реализации CSS на Netscape 4, есть
две проблемы, которые особенно актуальны здесь:
У Netscape есть проблемы с применением стилей к ячейкам таблицы, и
он не поддерживает такие свойства, как  border-left  .
В качестве обходного пути к первому мы можем обернуть содержимое ячейки в  div  и назначьте ему правила таблицы стилей.
Что касается последнего, мы можем использовать сокращенное свойство  border  (что частично работает на Netscape), чтобы предложить границу с желаемым цветом
и стиль границы, но с нулевой шириной, и используйте
свойство  border-left-width  (которое, как ни странно, частично
работает на Netscape), чтобы предположить, что левая граница имеет ненулевую ширину:
 
  один
  <стиль div=
   "граница: сплошная 0 #060; ширина левой границы: 2 пикселя; левая отступ: 0,5ex">
    два
три
 
 Вот как это выглядит в вашем браузере:
 один  два  три
 Свойство  padding-left  используется здесь, чтобы предотвратить попадание границы
Контент. Так как граница теперь не для элемента  td  а
для элемента  div  внутри него  cellpadding  влияет
отступ между этой границей и (невидимой) границей ячейки, а не между
граница и содержание 9Элемент 0003 div . Но это действительно
нет проблем, так как  padding-left  хорошо поддерживается
Браузеры с поддержкой CSS.
 Что может быть проблемой, так это то, что граница может не
расширяться по вертикали, чтобы заполнить всю ячейку, так как это граница для
Элемент  div  внутри элемента  td  и
атрибут  cellpadding  также влияет на отступы по вертикали.
Если это проблема, рассмотрите возможность установки  cellpadding  до нуля
и используя CSS для любого заполнения, которое вам нравится.
Обратите внимание, что в таблице стилей (внутри элемента стиля     , а не
атрибут или в отдельном файле) можно просто написать, скажем, 
  td, th { padding: 0. 5ex; }  
 чтобы установить отступ по умолчанию во всех ячейках на  0.5ex  ,
а затем, возможно, переопределить это для некоторых ячеек, если это необходимо.
 В заключение предупреждение: рекомендуется  явно закрыть все элементы, связанные с таблицей  с
конечные теги, такие как   ,   ,   и   , хотя
некоторые из них формально необязательны в соответствии со спецификациями HTML.
Мне удалось разбить Netscape довольно простой конструкцией только потому, что
Я не последовал этому совету.
 Дата последнего обновления: 2000-11-16
  Юкка Корпела 
 Примеры границ и правил таблицы 
 Примеры границ и правил таблицы Несколько примеров. Заполнение опущено для ясности. См. также
примеры с альтернативным синтаксисом.
 Пример
1 
 Соответствует правилу HTML3=все, граница=1.
 td, th {граница: 1px сплошная}
 
 Пример 2 
 Второй пример из спецификации HTML3. (интерпретировано из графики ASCII).
 таблица {
    верхняя граница: двойная;
    нижняя граница: двойная;
    граница справа: пусто
}
голова, тело, нога {
    верхняя граница: сплошная;
    нижняя граница: сплошная
}
группа {
    граница справа: сплошная
}
 
 Пример 3 
 А
таблица только с вертикальными линейками.
 столбец {
    граница слева: сплошная;
    граница справа: сплошная
}
 
 Пример 4 
 Таблица только с вертикальными правилами  между  столбцами.
 col {граница слева: сплошная}
таблица {граница слева: пусто}
 
 Пример 5 
 Типичная таблица Netscape: граница=5, ячейки=10.
 таблица {граница: гребень 16px(5,10,1)}
td, th {граница: гребень 12px (1,10,1)}
 
 НБ1. 16 = граница 5 пикселей + интервал 10 пикселей + тень 1 пиксель. Сходным образом,
12 = интервал 10 пикселей + 2 тени.
 НБ2. В этом случае удобно указать ребро как 1,10,1, что в сумме равно 12, но 2,20,2 дало бы точно такой же результат.
 Пример 6 
 Сложный заголовок таблицы, но нет правил в теле.
 объявление {
    верхняя граница: сплошная толстая;
    граница справа: пусто; /* предотвратить границу colgroup */
    border-left: пусто /* запретить границу ячейки */
}
colgroup {граница-справа: сплошная толстая}
thead td {граница: сплошная}
tbody td { border: пусто } /* удалить границу colgroup */
}
 
 Этот пример сложен, потому что нет способа адресовать часть colgroup в thead. Кажется, для этого нам понадобится оператор пересечения сортировки. В этом случае проблема была решена путем установки границы для всей colgroup, а затем ее повторного удаления в tbody.
 Пример 7 
 Пример 1 Криса Уилсона в его обозначениях:
 таблица { граница: 2px начало серый / темно-серый; отступ: 1px }
td {граница: тонкая вставка серая / темно-серая; поле: 1px }
 
 В моих обозначениях:
 таблица { граница: гребень 5px (2,2,1) }
td {граница: гребень 4px /* подразумевается: (1,2,1) */ }
 
 Предполагая, что «тонкий» означает 1 пиксель (что не слишком маловероятно), граница таблицы будет иметь 2 пикселя тени + 1 пиксел отступа + 1 пиксел поля + 1 пиксел тени = 5 пикселей. Обратите внимание, что я также предполагаю, что цвета теней выбираются автоматически.
 Пример 8 
 Пример Криса Уилсона 2. В его обозначениях:
 таблица { граница: 2px начало серый / темно-серый; отступ: 1px }
tr {граница: тонкая вставка серая / темно-серая; поле: 1px }
 
 В моих обозначениях:
 таблица { граница: гребень 5px (2,2,1) }
tr {граница: ребро 4 пикселя}
 
 Обратите внимание, что существуют и другие способы указать то же самое. Вместо границы на TR можно было бы установить верх и низ на каждой ячейке.
 Пример 9 
 Пример Криса Уилсона 3. В его обозначениях:
 таблица { граница: 2px начало серый / темно-серый; отступ: 4px }
td {граница: тонкая вставка серая / темно-серая; поле: 4px }
 
 В моих обозначениях:
 таблица { граница: гребень 11 пикселей (2,8,1) }
td {граница: гребень 10px (1,8,1)}
 
 Пример 10 
 Пример Криса Уилсона 4. В его обозначениях:
 таблица {граница: 2px одинарная черная}
td {граница: тонкий одиночный черный коллапс }
 
 В моих обозначениях:
 таблица {граница: 2px сплошная черная}
td {граница: тонкая сплошная черная}
 
 Пример 11 
 Теневая часть кажется торчащей, а не внутри границы. Что
означает, что он может перекрывать что-то еще, но, может быть, это и хорошо… Как
о добавлении прозрачности к тени? Вот пример таблицы стилей:
 таблица { граница: тонкая тень (толстая) }
td {граница: тонкая пунктирная}
#G {граница: переопределение тонкой тени (толстой) }
 
 Предполагается, что ячейка G имеет идентификатор `G’. Ключевое слово «переопределить» используется, чтобы убедиться, что стиль границы ячейки соблюдается. Если тени всегда сильнее, чем точки, это ключевое слово можно опустить.
 Пример 12 
 Разница в цвете между границей и ячейкой является проблемой. Он может
можно решить несколькими способами: (1) в HTML, поместив содержимое ячейки внутрь
другой элемент, такой как P или DIV, и наложение на него фона, или
(2) ввести свойство border-background или (3) указать, что таблица
фон используется для фона границы.
 Решение 1 не работает, если дочерние элементы имеют разную высоту. С раствором
2 и 3, точечный стиль нуждается в дополнительном параметре, который уже был предложен
ранее, чтобы установить диаметр точки.
 Используя решение 2 (установите желтый цвет на дочерних элементах ячеек):
 корпус { фон: розовый }
таблица { граница: нет }
td {граница: 5 пунктов, зеленая точка (8 пунктов, 0,8)}
td p {фон: желтый}
 
 Используя решение 3 (фон таблицы используется для границ):
 тело { фон: розовый }
таблица { граница: нет }
td {граница: 5pt, зеленая точка (8pt.0.8)}
td {фон: желтый}
 
 Используя модель Дейва:
 корпус { фон: розовый }
стол {
    правила: все;
    стиль правила: пунктирный;
    цвет правила: зеленый;
    ширина правила: 5pt
}
тд {
    поля: 2pt;
    фон: желтый
}
 
 Пример 13 
 Проблема здесь в коротких красных границах. Представляется необходимым представить
короткие правила в качестве типов границ. Обратите внимание, что конечные точки правил
не выровнены с текстом, хотя это чаще встречается в других таблицах.
 Также кажется, что белые линии проходят под зелеными точками, но это может
быть общим правилом каждый раз, когда сплошная линия пересекается с пунктирной линией.
 Попытка использования модели Дэйва:
 таблица {
    правила: все;
    правило-стиль: сплошная точка;
    ширина правила: 5pt 2pt;
    цвет правила: зеленый белый;
    /* Как подавить правило под thead? */
}
объявление тд {
    стиль границы: нет, нет, сплошной, нет;
    ширина границы: толстая;
    цвет границы: красный;
    поле: 4pt;
}
 
 Попытка использования моей модели:
 столбец {
    граница слева: 5 пунктов зеленый с точками;
    граница справа: 5 пт с зелеными точками;
}
tbody тр {
    верхняя граница: сплошной белый 3pt
}
объявление тд {
    /* Вводим `короткий' стиль */
    нижняя граница: 5pt короткий (4pt) сплошной красный
}
 
 Пример 14 
 Диагональный текст и диагональные границы нельзя сделать без введения некоторых
новое свойство. Обратите внимание, что ячейки сдвинуты на 30°, а текст
поставить тоже вертикально.
 td {граница: тонкая сплошная}
thead { сдвиг: -30 }
thead td { вращение текста: 90 }
 
 Пример 15 
 Есть несколько способов взглянуть на эту таблицу: (1) на самом деле это две таблицы
вместо одного, (2) есть пространство между головой и туловищем, (3) между
голова и тело представляют собой двойную линию.
 Используя 3 (и предполагая, что фон границы взят из фона таблицы):
 тр { граница: .4pt }
таблица {граница: толстая сплошная}
thead {граница: 14pt double(1,12,1)}
thead { фон: голубой }
tr.odd {фон: желтый}
tr.even {фон: голубой}
 
 Пример 16 
 Короткие горизонтальные линейки между ячейками.
 td, th {нижняя граница: тонкая короткая}
table { border: none } /* удалить нижнюю границу */
 
 Значение по умолчанию для `short’ может быть заполнением ячейки.
 Пример 17 
 Одиночная черная кайма на теле, белая (или прозрачная) кайма на голове.
No related posts.