Содержание

Рамка и отступы таблицы (свойства border-spacing, empty-cells, border-collapse)

Как сделать рамку для таблицы

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

Ячейка Ячейка
Ячейка Ячейка
<table style="border: 1px solid red;">
  <tr>
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
</table>

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

Ячейка Ячейка
Ячейка Ячейка
<table style="border: 1px solid red;">
  <tr>
    <td style="border: 1px solid red;">Ячейка
    <td 
style="border: 1px solid red;"
>Ячейка <tr> <td style="border: 1px solid red;">Ячейка <td style="border: 1px solid red;">Ячейка </table> <style> .raz, .raz td { border: 1px solid red; } </style> <table class="raz"> <tr> <td>Ячейка <td>Ячейка <tr> <td>Ячейка <td>Ячейка </table>

Убрать промежутки от ячеек до краёв таблицы

Ячейка Ячейка Ячейка
Ячейка Ячейка Ячейка
Ячейка Ячейка Ячейка
Ячейка Ячейка Ячейка
<style>



.raz {
  border-spacing: 0;
  padding: 0 2em 3em 0;  
}
.raz,
.raz td {
  position: relative;
  border: 1px solid red;
}
.raz td:nth-child(2) {
  left: 1em;
}
.raz td:nth-child(3) {
  left: 2em;  
}
.raz tr:nth-child(2) td {
  top: 1em;
}
.raz tr:nth-child(3) td {
  top: 2em;
}
.raz tr:nth-child(4) td {
  top: 3em;
}
</style>

<table>
  <tr>
    <td>Ячейка
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
    <td>Ячейка
</table>

Скрыть пустые ячейки в таблице c border-collapse: collapse; можно с помощью псевдоклассов :empty или :blank.

border-collapse: схлопывание границ ячеек
separate
у каждой ячейки и таблицы в целом своя граница, игнорируется свойство border у thead, tfoot, tbody и tr
collapse
между ячейками и контейнером единая граница, отсутствуют двойные рамки таблицы, игнорируются свойства border-spacing, empty-cells, padding у table
initial
separate
inherit
наследует значение родителя
unset
наследует значение родителя
Ячейка Ячейка
Ячейка Ячейка
<style>
.raz {
  border-collapse: collapse; 
}
.raz,
.raz td {
  border: 1px solid red;
}
.raz tbody,
.raz tr,
.raz td {
  margin: 1em; 
}
.raz tbody,
.raz tr {
  padding: 1em; 
}
</style>

<table>
  <tbody>
    <tr>
      <td>Ячейка
      <td>Ячейка
    <tr>
      <td>Ячейка
      <td>Ячейка
</table>

Жирные внешние границы таблицы

Ячейка Ячейка
Ячейка Ячейка
<style>
.raz {
  border-collapse: collapse;
  border: 4px solid red;
}
.raz td {
  border: 1px solid red;
}
</style>

<table>
  <tr>
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
</table>

Таблица без границ аки сетка без внешней рамки

Ячейка Ячейка
Ячейка Ячейка
<style>
.raz {
  border-collapse: collapse;
  border-style: hidden;
}
.raz td {
  border: 1px solid red;
}
</style>

<table>
  <tr>
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
</table>

Свойство

border у tr
Заголовок Заголовок
Ячейка Ячейка
Ячейка Ячейка
<style>
.raz {
  border-collapse: collapse;
}
.raz tr:first-child {
  border-bottom: 1px solid red;
}
.raz th+th,
.raz td+td {
  padding-left: 1em;  
}
</style>

<table>
  <tr>
    <th>Заголовок
    <th>Заголовок
  <tr>
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
</table>

Свойство

padding у table
при border-collapse: collapse;
Ячейка Ячейка
Ячейка Ячейка
<style>
.raz {
  border-collapse: collapse;
  outline: 1px solid red;  
  outline-offset: 2px;
  margin: 3px;  
}
.raz,
.raz td {
  border: 1px solid red;
}
</style>

<table>
  <tr>
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
</table>

Отступы внутри ячейки таблицы

Расстояние от содержимого до края ячейки определяет свойство padding.

Ячейка Ячейка
Ячейка Ячейка
<style>
.raz {
  border-collapse: collapse;
}
.raz td {
  border: 1px solid red;
  
padding: .3em 1em;
} </style> <table> <tr> <td>Ячейка <td>Ячейка <tr> <td>Ячейка <td>Ячейка </table>

Таблицы и границы | 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{
border-color: black;
border-style: solid;
border-width: 0 1px 1px 0
}

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{
border-collapse:collapse
}

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

Tables таблица CSS уроки для начинающих академия



Внешний вид таблицы HTML может быть значительно улучшен с помощью CSS:

Компания Контакт Страна
Alfreds Futterkiste Maria Anders Germany
Berglunds snabbköp Christina Berglund Sweden
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Königlich Essen Philip Cramer Germany
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy


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

Чтобы задать границы таблицы в CSS, используйте свойство border .

В приведенном ниже примере указывается черная граница для элементов <TABLE>, <th> и <TD>:

Пример

table, th, td {
   border: 1px solid black;
}

Обратите внимание, что таблица в приведенном выше примере имеет двойные границы. Это связано с тем, что оба элемента таблицы и <th> и <TD> имеют отдельные границы.


Свернуть границы таблицы

Свойство border-collapse задает, следует ли свернуть границы таблицы в одну границу:

Пример

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

Если требуется только граница вокруг таблицы, укажите только свойство border для <TABLE>:

Пример

table {
    border: 1px solid black;
}



Ширина и высота таблицы

Ширина и высота таблицы определяются свойствами width и height.

В приведенном ниже примере устанавливается ширина таблицы 100%, а высота <th> элементов 50px:

Пример

table {
    width: 100%;
}

th {
    height: 50px;
}


Выравнивание по горизонтали

Свойство text-align задает выравнивание по горизонтали (например, влево, вправо или по центру) содержимого в <th> или <TD>.

По умолчанию содержимое элементов <th> выравнивается по центру, а содержимое элементов <TD> выравнивается по левому краю.

В следующем примере выравнивание текста по левому краю в <th> элементах:

Пример

th {
    text-align: left;
}


Выравнивание по вертикали

Свойство vertical-align устанавливает вертикальную трассу (например, верхнюю, нижнюю или среднюю) содержимого в <th> или <TD>.

По умолчанию вертикальное выравнивание содержимого в таблице является средним (для элементов <th> и <TD>).

В следующем примере устанавливается выравнивание по вертикали текста по нижнему краю для элементов <TD>:

Пример

td {
    height: 50px;
    vertical-align: bottom;
}


Заполнение таблицы

Чтобы управлять пространством между границей и содержимым в таблице, используйте свойство padding для элементов <TD> и <th>:

Пример

th, td {
    padding: 15px;
    text-align: left;
}


Горизонтальные разделители

First Name Last Name Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

Добавьте свойство border-bottom в <th> и <TD> для горизонтальных разделителей:

Пример

th, td {
    border-bottom: 1px solid #ddd;
}


Hoverable Таблица

Используйте селектор :hover на <TR>, чтобы выделить строки таблицы при наведении указателя мыши:

First Name Last Name Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

Пример

tr:hover {background-color: #f5f5f5;}


Striped Таблицы

First Name Last Name Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

Для таблиц, чередующихся с зебрами, используйте селектор nth-child() и добавьте background-color ко всем четным (или нечетным) строкам таблицы:

Пример

tr:nth-child(even) {background-color: #f2f2f2;}


Цвет таблицы

В приведенном ниже примере указывается цвет фона и цвет текста <th> элементов:

First Name Last Name Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

Пример

th {
    background-color: #4CAF50;
    color: white;
}


Отзывчивый стол

Реагирующая таблица будет отображать горизонтальную полосу прокрутки, если экран слишком мал для отображения полного содержимого:

First Name Last Name Points Points Points Points Points Points Points Points Points Points Points Points
Jill Smith 50 50 50 50 50 50 50 50 50 50 50 50
Eve Jackson 94 94 94 94 94 94 94 94 94 94 94 94
Adam Johnson 67 67 67 67 67 67 67 67 67 67 67 67

Добавьте элемент контейнера (например, < div >) с overflow-x:auto вокруг <TABLE> элемента, чтобы сделать его отзывчивым:

Пример

<table>
… table content …
</table>

</div>

Примечание: В OS X Lion (на Mac) полосы прокрутки скрыты по умолчанию и отображаются только при использовании (даже если задано «переполнение: прокрутка»).


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

Сделать причудливый стол
В этом примере демонстрируется создание причудливой таблицы.

Задание положения заголовка таблицы
В этом примере демонстрируется расположение заголовка таблицы.


Свойства таблицы CSS

Свойство Описание
border Задает все свойства границы в одном объявлении
border-collapse Указывает, следует ли свернуть границы таблицы
border-spacing Определяет расстояние между границами соседних ячеек
caption-side Задает размещение заголовка таблицы
empty-cells Указывает, отображать ли границы и фон на пустых ячейках таблицы
table-layout Задает алгоритм компоновки, используемый для таблицы

как сделать или убрать границу?

Рамки — это такие линии, которые окружают элемент (содержащийся в нём контент и отступы вокруг него). Пример, с которым мы уже сталкивались — рамки ячеек внутри таблицы.

CSS предусматривает два типа рамок: внутренние границы и внешние линии. Свойства CSS, отвечающие за оформление рамок, начинаются со слова «border», которое как раз и можно перевести как «Рамка», «Граница». Наличие и формат внешнего контура задаются свойствами, начинающимися словом «outline». Outline, в отличие от border, не влияет на ширину и положение обрамляемого блока. Кроме того, его нельзя установить только с одной стороны, как border — только со всех сторон сразу.

Сначала поговорим об оформлении border, потом перейдём к outline.

border-width

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

Количество значений

Результат

1

Одинаковая ширина рамок со всех сторон.

2

Первое значение задаёт толщину верхней и нижней рамок, второе — левой и правой.

3

1 — верхняя рамка, 2 — левая и правая, 3 — нижняя.

4

Значения ширины, начиная с верхней границы по часовой стрелке (верхняя, правая, нижняя, левая).

Задавать ширину можно как с помощью привычных пикселей, процентов и других единиц длины CSS, так и зарезервированными словами thin (2px), medium (4px) и thick (6px).

border-width: 16px 12px 4px 8px;

border-style

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

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

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

<p>border-style: solid double dotted none</p>

border-color

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

border

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

p { border: 2px solid green; }

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

  • border-top — верхняя граница.
  • border-right — правая.
  • border-bottom — нижняя.
  • border-left — левая.
p { border-left: 6px dotted yellow; }

outline-width

То же самое, что и border-width, только для внешней, а не внутренней рамки. Задаёт толщину контура в тех же значениях, что и border-width. Кроме толщины обрамления элемента нужно указать его стиль, иначе контура не будет.

outline-style

Значения свойства дублируют значения border-style. Правило задаёт стиль внешнего контура.

outline-color

Определяет цвет внешнего контура.

Пример кода ниже задаёт стиль заголовка первого уровня с зелёными внутренними границами и оранжевыми внешними контурами.

h2 { border: solid 3px green; outline-style: solid; outline-width: 6px; outline-color: orange; }

outline

Объединяющее три предыдущих свойство, аналог border.

Код:

<!DOCTYPE html>
<html>
<head>
    <title>outline</title>
    <style type="text/css">
    h2 {
	border: solid 3px green;
	outline: solid 6px orange;
    }
    </style>
</head>
<body>
<h2>Заголовок с внешним контуром</h2>
</body>
</html>

Результат:

Полезные ссылки:

Шпаргалка фронтендера: гид по таблицам | GeekBrains

Подробное руководство, как сделать опрятную и информативную таблицу

https://d2xzmw6cctk25h.cloudfront.net/post/1803/og_cover_image/706da601b44ca4015a1b2f704d68a496

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

Как отобразить данные

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

В «Справочнике издателя и автора» Аркадия Мильчина и Людмилы Чельцовой даются правила, которые помогают устранить информационный шум: убрать повторы, лишние ячейки и слова, упростить информацию в целом. Чтобы уменьшить размер таблиц, Аркадий Мильчин советует их сдваивать, страивать и «перевертывать», объединять графы, менять местами заголовки столбцов и строк, выносить информацию за пределы таблицы. Для длинных сложных таблиц желательно придумать, как переформатировать данные.

Было

Стало

Сделать чище. Иногда таблицы выглядят неопрятными — в них много цвета, жирности, линеек. Если убрать оформление полностью, как правило, становится лучше. Цифры в строгих столбиках на белом фоне читаются проще, и информативность таблицы повышается.

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

Сделать удобной. Таблицы не составляют только для того, чтобы они были. Цель каждой — донести до читателя важную информацию. При составлении таблицы задайте себе вопрос «Что именно должен узнать читатель?» В зависимости от ответа сгруппируйте данные и выделите важные. Если сравниваете стоимость, посчитайте разницу в цене за читателя и сразу укажите ее в таблице. Выделите важное цветом или расположите на особом месте в таблице — внизу или отдельно от других данных.

Таблица — маленькое исследование. В ней должны быть полные и достоверные данные. При возможности указывайте ссылку на источник. Располагайте информацию логически — колонки и строки должны соподчиняться между собой. Если в заголовке года, не стоит внутри делить на недели — разбейте таблицу по месяцам или кварталам. Размещайте в одной графе сопоставимые данные — не смешивайте литры и штуки. Часто точные числа не нужны — округлите их до целого. В числах с множеством нулей уберите разряды: вместо 333 500 000 напишите 333,5 млн.

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

Как сверстать таблицу

Основные теги — <table>, <tr> и <td>. Таблицы верстают не столбцами, а строками. То есть мы сначала прописываем первую строку (<tr>) и сразу в ней — нужное количество ячеек (<td>), таким же образом вторую строку. И так создаем все строки. Саму таблицу помещают в тег <table>. Простая таблица выглядит так:

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

Для шапки и итога таблицы есть собственные теги — <thead> и <tfoot>. Они не обязательны. Раньше при табличной верстке их использовали как шапку и подвал сайта, так же как сейчас — <header> и <footer>. Теперь <thead> и <tfoot> применяют на усмотрение фронтендера.

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

Для заголовка таблицы используйте тег <caption>, который ставится сразу после открывающего тега <table>. Новички часто для заголовков таблицы используют тег <h4>, однако это неверно. Браузер не сможет определить, к чему именно относится заголовок, а <caption> сразу свяжет его с таблицей. Заголовок оформляют средствами CSS, а выравнивают через свойство text-align. Мы его рассмотрим ниже.

Чтобы сэкономить время, можно воспользоваться html-генераторами таблиц: Daruse, «Замётки», Tables Generator и другими. Вам необходимо будет ввести количество строк и столбцов и при необходимости указать, какие из них нужно объединить. В некоторых генераторах можно настроить стиль, цвет, добавить заголовок.

Группировка ячеек. Иногда ячейки требуется объединить. Используйте для тега <td> атрибуты: colspan для объединения по горизонтали и rowspan — по вертикали. Запись выглядит так:


<td colspan=”число”></td>
<td rowspan=”число”></td>

Для атрибута указывайте количество ячеек для объединения. Ячейки, которые больше не нужны, удалите вручную, иначе таблица «поедет».

Границы. По умолчанию в таблице нет границ и фона. Их можно задать с помощью свойства css border — установить ширину, жирность и цвет. Свойство не наследуется, поэтому если его применить только к тегу <table>, то у таблицы будет только внешняя граница, без разделения на ячейки внутри.

Чтобы границы были еще и у ячеек, необходимо присвоить свойство тегу <td>. В нашем примере внешняя граница таблицы — красная, внутренние — синие.

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

Мы видим, что по умолчанию все границы двойные. Чтобы сделать их одинарными, используйте свойство border-collapse для тега <table>:


border-collapse: separate; /* двойная рамка */
border-collapse: collapse; /* одинарная рамка */

Если нужно сделать двойную рамочку, используйте свойство CSS border-spacing. Оно задает расстояние между ячейками. Можно сделать одинаковые отступы — например, border-spacing: 5px;, или разные — border-spacing: 3px 6px;. Здесь первое значение задает отступы по горизонтали, второе — по вертикали. Свойство не работает при border-collapse: collapse;.

Когда нужна не сетка, а линии внутри таблицы, используйте свойства: border-bottom (линия снизу), border-top (линия сверху), border-left (линия слева) и border-right (линия справа). Они работают с тегами <table> и <td>.

Размеры таблицы. Высота и ширина таблицы задается текстом внутри нее. Чем его больше, тем шире таблица. Чтобы управлять размерами, используйте свойства CSS: width (ширина) и height (высота). Их задают в процентах, пикселях, em — во всех единицах измерения. Например, width:100% задает ширину таблицы по ширине родительского контейнера.

А это таблица со строгой шириной — 600 пикселей.

Фон. Цвет устанавливают с помощью свойства background. Оно наследуется, поэтому проверяйте, к какому элементу прописываете.

Чтобы сделать «зебру», используйте псевдокласс :nth-child для тега <tr>: even (четные) и odd (нечетные). Записывается так:


tr:nth-child(odd) {
    background: green;
}

Текст внутри. По умолчанию для текста установлено выравнивание по левому краю и по центру высоты. Чтобы его изменить, используйте свойство text-align. Оно задает тексту шесть положений:

  • left — по левому краю;
  • right — по правому краю;
  • start — по левому краю, когда текст идет слева направо, и по правому краю, если справа налево;
  • end — по правому краю, если текст идет слева направо, и по левому краю, если справа налево;
  • center — по центру;
  • justify — по ширине (браузер добавляет пробелы).

Для выравнивания по высоте применяйте свойство vertical-align, которое задает четыре положения:

  • baseline — по умолчанию выравнивает базовую линию ячейки с базовой линией первой строки;
  • bottom — по нижнему краю;
  • middle — по середине;
  • top — по верхнему краю.

Нужна ли нам таблица

Лучше текстом. Иногда в таблице много текста, который переходит на несколько строчек. Издалека она выглядит опрятно, но читать ее неудобно. Автору приходится мельчить и выбрасывать важные подробности, чтобы уместить текст в таблицу. Вместо этого лучше оформить информацию текстом в виде наборных подзаголовков. Для каждой ячейки таблицы написать отдельный абзац, а смысл изложить в мире читателя. Например, построить структуру в таблице, в которой сравниваются языки программирования, не по их названиям: С, Java, Swift, — а по назначению: «Языки для мобильной разработки», «Языки для web-разработки» и подобное.

Лучше списком. В таблице может быть мало данных: например, имя, e-mail и телефон. Тогда лучше оформить их в виде списка — вынести в заголовок имя, а контакты поставить ниже. Данные будут сгруппированы, и их станет проще воспринимать. Также такой способ больше подходит для мобильной версии сайтов, потому что на экране телефона удобнее смотреть длинные вертикальные списки, чем изучать широкую горизонтальную таблицу.

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

Инфографика Diversity in Tech, портал informationisbeautiful.net

Шпаргалка

Таблицы HTML — Веб учебники



HTML таблицы позволяют веб разработчикам упорядочивать данные в строки и столбцы


Пример

Компания Контакты Страна
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy
Попробуйте сами »

Определение таблицы HTML

Тег <table> определяет таблицу HTML.

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

По умолчанию текст элементы <th> выделены жирным шрифтом и центрированы.

По умолчанию текст элементы <td> являются регулярными и выровненными по левому краю.

Пример

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

<table>
 <tr>
    <th>Имя</th>
    <th>Фамилия</th>
    <th>Лет</th>
 </tr>
 <tr>
    <td>Джилл</td>
    <td>Смит</td>
    <td>50</td>
 </tr>
  <tr>
    <td>Ева</td>
    <td>Джексон</td>
    <td>94</td>
  </tr>
</table>

Попробуйте сами »

Примечание: Элемент <td> — контейнеры данных таблицы.
Они могут содержать все виды HTML элементов: текст, изображения, списки, другие таблицы и т.д.



HTML Таблица — Добавление границы

Чтобы добавить границу в таблицу, используйте CSS свойство border:

Не забудьте определить границы как для таблицы, так и для ячеек таблицы.


HTML Таблица — Крах ганиц

Чтобы позволить границам свернуться в одну границу, добавьте CSS свойство border-collapse:


HTML Таблица — Добавить заполнение ячеек

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

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

Чтобы установить отступ, используйте CSS свойство padding:


HTML Таблица — Выравнивание заголовков по левому краю

По умолчанию заголовки таблиц выделены жирным шрифтом и центрированы.

Чтобы выровнять заголовки таблиц по левому краю, используйте CSS свойство text-align:


HTML Таблица — Добавить интервал между границами

Расстояние между границами определяет расстояние между ячейками.

Чтобы задать интервал между границами таблицы, используйте CSS свойство border-spacing:

Примечание: Если таблица имеет свернутые границы, border-spacing это не имеет никакого эффекта.


HTML Таблица — Ячейка, охватывающая много столбцов

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

Пример

<table>
  <tr>
    <th>Имя</th>
    <th colspan=»2″>Телефон</th>
  </tr>
  <tr>
    <td>Билл Гейтс</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

Попробуйте сами »

HTML Таблица — Ячейка, охватывающая много строк

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

Пример

<table>
  <tr>
    <th>Имя:</th>
    <td>Билл Гейтс</td>
  </tr>
  <tr>
    <th rowspan=»2″>Телефон:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>

Попробуйте сами »

HTML Таблица — Добавить подпись

Чтобы добавить подпись к таблице, используйте тег <caption>:

Пример

<table>
  <caption>Ежемесячные сбережения</caption>
  <tr>
    <th>Месяц</th>
    <th>Экономия</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Февраль</td>
    <td>$50</td>
  </tr>
</table>

Попробуйте сами »

Примечание: Тег <caption> должен быть вставлен сразу же после тега <table>.


Особый стиль для одного стола

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

Пример

<table>
  <tr>
    <th>Имя</th>
    <th>Фамилия</th>
    <th>Лет</th>
  </tr>
  <tr>
    <td>Ева</td>
    <td>Джексон</td>
    <td>94</td>
  </tr>
</table>

Теперь вы можете определить специальный стиль для этой таблицы:

#t01 {
  width: 100%;
  background-color: #f1f1c1;
}

Попробуйте сами »

И добавьте больше стилей:

#t01 tr:nth-child(even) {
  background-color: #eee;
}
#t01 tr:nth-child(odd) {
  background-color: #fff;
}
#t01 th {
  color: white;
  background-color: black;
}

Попробуйте сами »

Краткое содержание

  • Используйте в HTML элемент <table> для определения таблиц
  • Используйте в HTML элемент <tr> чтобы определить строку таблицы
  • Используйте в HTML элемент <td> для определения табличных данных
  • Используйте в HTML элемент <th> чтобы определить заголовок таблицы
  • Используйте в HTML элемент <caption> чтобы определить надпись таблицы
  • Используйте в CSS свойство border чтобы определить границы
  • Используйте в CSS свойство border-collapse чтобы рухнули границы ячеек
  • Используйте в CSS свойство padding чтобы добавить отступы для ячеек
  • Используйте в CSS свойство text-align для выравнивания текста в ячейке
  • Используйте в CSS свойство border-spacing чтобы задать интервал между ячейками
  • Используйте атрибут colspan для создания ячейки охватывают множество столбцов
  • Используйте атрибут rowspan чтобы сделать промежуток ячейке несколько строк
  • Используйте атрибут id для определения одной таблицы

HTML Упражнения


HTML Теги таблицы

Тег Описание
<table> Определяет таблицу
<th> Определяет заголовок ячейки в таблице
<tr> Определяет строки в таблице
<td> Определяет ячейку в таблице
<caption> Определяет надпись таблицы
<colgroup> Задает группу из одного или нескольких столбцов в таблице для форматирования
<col> Задает свойства столбца для каждого столбца в элементе <colgroup>
<thead> Группирует содержимое заголовка в таблице
<tbody> Группирует содержимое тела в таблице
<tfoot> Группирует содержимое нижнего колонтитула в таблице

Не удается найти страницу | Autodesk Knowledge Network

(* {{l10n_strings.REQUIRED_FIELD}})

{{l10n_strings.CREATE_NEW_COLLECTION}}*

{{l10n_strings.ADD_COLLECTION_DESCRIPTION}}

{{l10n_strings.COLLECTION_DESCRIPTION}} {{addToCollection.description.length}}/500 {{l10n_strings.TAGS}} {{$item}} {{l10n_strings.PRODUCTS}} {{l10n_strings.DRAG_TEXT}}  

{{l10n_strings.DRAG_TEXT_HELP}}

{{l10n_strings.LANGUAGE}} {{$select.selected.display}}

{{article.content_lang.display}}

{{l10n_strings.AUTHOR}}  

{{l10n_strings.AUTHOR_TOOLTIP_TEXT}}

{{$select.selected.display}} {{l10n_strings.CREATE_AND_ADD_TO_COLLECTION_MODAL_BUTTON}} {{l10n_strings.CREATE_A_COLLECTION_ERROR}}

Как добавить границу в HTML-таблицу

Чтобы добавить границу в HTML

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

Узнайте, как создать таблицу HTML здесь.

Создание границы для таблицы HTML¶

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

Пример создания HTML-таблицы с атрибутом border: ¶

  

  
     Название документа 
  
  
    
Человек Возраст
Энн 19
Сьюзи 22
Попробуйте сами »

Результат¶

Человек Возраст
Ann 19
Susie 22

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

Человек Возраст
Энн 19
Сьюзи 22
Попробуйте сами »

Как изменить стиль границы таблицы HTML с помощью CSS¶

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

Пример изменения стиля границы таблицы HTML с помощью CSS: ¶

  

  
     Название документа 
    <стиль>
      Таблица {
        бордюрный стиль: гребень;
        ширина границы: 150 пикселей;
        цвет границы: # 8ebf42;
        цвет фона: # d9d9d9;
      }
      th {
        граница: 5px solid # 095484;
      }
      td {
        граница: углубление 20px # 1c87c9;
      }
    
  
  
    <таблица>
      
         Человек 
         Возраст 
      
      
         Энн 
         19 
      
      
         Сьюзи 
         22 
      
    
  
  
Попробуйте сами »

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

Пример добавления нижних границ в HTML-таблицу: ¶

  

  
     Название документа 
    <стиль>
      Таблица {
        граница-коллапс: коллапс;
      }
      тд,
      th {
        отступ: 10 пикселей;
        нижняя граница: 2px solid # 8ebf42;
        выравнивание текста: центр;
      }
    
  
  
    <таблица>
      
         Человек 
         Возраст 
      
      
         Энн 
         19 
      
      
         Сьюзи 
         22 
      
    
  
  
Попробуйте сами »

Как получить скругленные границы¶

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

Пример добавления закругленных границ в HTML-таблицу: ¶

  

  
     Название документа 
    <стиль>
      Таблица,
      тд,
      th {
        отступ: 10 пикселей;
        граница: 2px solid # 1c87c9;
        радиус границы: 5 пикселей;
        цвет фона: # e5e5e5;
        выравнивание текста: центр;
      }
    
  
  
    <таблица>
      
         Человек 
         Возраст 
      
      
         Энн 
         19 
      
      
         Сьюзи 
         22 
      
    
  
  
Попробуйте сами »

Как добавить рамку к элементам

,

или

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

,

и

.

Пример добавления границ к элементам

,

и

: ¶
  

  
     Название документа 
    <стиль>
      h3,
      div,
      п {
        отступ: 10 пикселей;
      }
      h3 {
        граница: 3px двойной # 1c87c9;
        цвет фона: # d9d9d9;
      }
      div {
        граница слева: 5px solid # 1c87c9;
        цвет фона: #cccccc
      }
      п {
        граница: канавка 10px # 8ebf42;
      }
    
  
  
    

Пример границы

Пример Div для свойства границы.

Какой-то абзац с рамкой.

Попробуйте сами »

Если вы хотите, чтобы границы абзацев были закругленными, следуйте приведенному ниже примеру, чтобы узнать, как это сделать. Используйте свойство border-radius, чтобы получить желаемый результат.

Пример создания закругленных границ на абзацах: ¶

  

  
     Название документа 
    <стиль>
      п {
        отступ: 10 пикселей;
      }
      п.обычный {
        граница: 2px solid # 1c87c9;
      }
      p.round1 {
        граница: 2px solid # 1c87c9;
        радиус границы: 5 пикселей;
      }
      p.round2 {
        граница: 2px solid # 1c87c9;
        радиус границы: 8 пикселей;
      }
      p.round3 {
        граница: 2px solid # 1c87c9;
        радиус границы: 12 пикселей;
      }
    
  
  
    

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

Нормальная граница

Круглая граница

Круглая граница

Круглая граница

Попробуйте сами »

HTML-тег таблицы


Пример

Простая таблица HTML, содержащая два столбца и две строки:

<таблица>

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


Январь
г. 100

Попробуй сам "

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


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

Тег

определяет таблицу HTML.

Таблица HTML состоит из одного элемента

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


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

и .

Элемент

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

Таблица HTML может также включать

,
Элемент
<таблица> Есть Есть Есть Есть Есть

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

Тег

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


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

Тег

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



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

Пример

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




table, th, td {
border: 1px сплошной чернить;
граница-коллапс: коллапс;
}

<таблица>













Месяц Экономия
январь 100
февраль 80 долларов США


Попробуй сам "

Пример

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

<таблица>

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


январь
100


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

Попробуй сам "

Пример

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




table, th, td {
border: 1px сплошной чернить;
}
стол.по центру {
маржа-слева: авто;
маржа-право: авто;
}

<таблица >

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


январь
100


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

Попробуй сам "

Пример

Как добавить цвет фона в таблицу (с помощью CSS):

<таблица>

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


январь
100


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

Попробуй сам "

Пример

Как добавить отступ в таблицу (с помощью CSS):




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

th, td {
padding: 10px;
}















Месяц Экономия
январь 100
февраль 80 долларов США



Попробуй сам »

Пример

Как установить ширину таблицы (с помощью CSS):

<таблица>

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


январь
100


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

Попробуй сам »

Пример

Как создавать заголовки таблиц:












Имя Электронная почта Телефон
Джон Доу джон[email protected] 123-45-678

Попробуй сам »

Пример

Как создать таблицу с подписью:

<таблица>
Ежемесячная экономия

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


январь
100


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

Попробуй сам »

Пример

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













Имя Электронная почта Телефон
Джон Доу джон[email protected] 123-45-678 212-00-546

Попробуй сам »

Связанные страницы

Учебное пособие по HTML: таблицы HTML

Ссылка на HTML DOM: объект таблицы

Учебное пособие по CSS: таблицы стилей


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

Большинство браузеров будут отображать элемент

со следующими значениями по умолчанию:

Пример

стол {
дисплей: таблица;
граница-обрушение: раздельное;
border-spacing: 2px;
цвет границы: серый;
}

Попробуй сам »

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

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

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

Пример 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

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

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

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

Пример 17

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


Берт Бос
19 апреля 1996 года

HTML | Атрибут border

Атрибут HTML

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

Синтаксис:

 

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

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

Пример:

< html >

9002

0

900 < заголовок >

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

заголовок >

голова >

< корпус >

< h2 > GeeksforGeeks h2 >

< h3 таблица Атрибут границы h3 >

9 0011 < таблица граница = "1" >

< подпись > Сведения об авторе подпись >

< tr >

< th > NAME th >

< th > AGE >

< > ФИЛИАЛ >

tr >

< tr >

< td > BITTU 90 011 td >

< td > 22 td >

< td > CSE td >

tr >

< tr >

< td > RAM td >

< td > 21 td >

< td > ECE td >

tr >

таблица >

900 11 body >

html >

Вывод:

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

Атрибут приведен ниже:

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

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


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

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

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

Lifewire / Дерек Абелла

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

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

Перед тем, как начать

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

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

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

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

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

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

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

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

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

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

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

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

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

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

tr: last-child {
граница внизу: нет;
}

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

Если вам нужны только строки между определенными строками или столбцами, вы можете использовать класс для этих ячеек или строк. Если вы предпочитаете немного более чистую разметку, вы можете использовать псевдокласс 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 в свою таблицу стилей:

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

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

Полезные советы

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

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

Подробнее о таблицах CSS и HTML

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

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

Границы таблицы 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-х годах использовалось несколько чистых HTML-трюков для достижения того, что теперь делается с помощью CSS.Одним из них была обработка визуальных границ таблицы HTML.

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

Концепт

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

Ancient 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 >
< таблица  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, но также и во всех веб-браузерах, перечисленных в разделе «Поддержка браузеров» ниже: как в современных, так и в старых.

Поддержка браузера
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
Дилло 3.0.2
Подробнее

A Пошаговое руководство

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

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

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

HTML-таблицы

Код

HTML определяет структуру таблиц. Для определения таблицы используется тег

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

Найди свой матч на тренировочном лагере

Название книги Автор Недели в списке
Зеркало и свет Хилари Мантел Новое на этой неделе
Путешествие фараонов Клайв Касслер и Грэм Браун Новое на этой неделе
Где поют раки Делия Оуэнс 79
Американская грязь Джанин Каммингс 8
Маленькие пожары повсюду Селеста Нг 57

Эта таблица включает три столбца и шесть строк, включая одну строку заголовка.

Таблицы CSS

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

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

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

Мы рассмотрим все эти темы в обсуждении ниже.

Границы

Предположим, мы хотим добавить границы вокруг таблицы или вокруг элементов внутри нее.

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

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

В нашем коде мы определяем сплошную черную рамку шириной 1 пиксель. Вот результат нашего кода:

Обратите внимание, что наша таблица содержит двойные границы.Это потому, что мы применили границу к самой таблице (

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

 tr: hover {
цвет фона: светло-серый;
}
 

Наш код возвращает:

При наведении курсора на строку таблицы цвет строки меняется на светло-серый.В этом случае мы навели курсор на четвертую строку нашей таблицы, поэтому цвет этой строки стал светло-серым.

Цвета стола

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

-е {
цвет фона: серый;
цвет белый;
}
 

Наш код возвращает:

В этом примере ячейки заголовка нашей таблицы (

) и ее ячейкам (). Чтобы объединить двойные границы в одинарные, мы можем использовать свойство border-collapse.

Обрушение границы

Свойство border-collapse преобразует двойные границы в таблице в одинарные. Значение по умолчанию свойства border-collapse свернуто. Если свойству border-collapse присвоено значение collapse , границы вокруг таблицы будут свернуты.

Вот пример свойства border-collapse в действии:

 table {
граница-коллапс: коллапс;
}
 

Наш код возвращает:

Наша таблица и ее содержимое теперь имеют единую рамку.

Расстояние между границами

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

Вот пример, в котором используется свойство border-spacing в нашей исходной таблице (таблица без свернутых границ):

 table {
интервал границы: 10 пикселей 10 пикселей;
}
 

Наш код возвращает:

Каждая из наших ячеек имеет интервал 10 пикселей как по горизонтали, так и по вертикали.

Ширина и высота

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

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

 table {
ширина: 100%;
}

th {
высота: 30 пикселей;
}
 

Наш код возвращает:

Как видите, наша таблица теперь равна ширине веб-страницы. Кроме того, высота заголовков столбцов в нашей таблице составляет 30 пикселей.

Набивка

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

и .

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

 th, td {
отступ: 10 пикселей;
}
 

Наш код возвращает:

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

Выравнивание текста по горизонтали

Свойство text-align можно использовать для горизонтального выравнивания текста, хранящегося в тегах

или в таблице.По умолчанию элементы выравниваются по центру, а элементы выравниваются по левому краю.

Наиболее часто используемые значения атрибута text-align:

  • слева, по центру, справа (поддерживается всеми браузерами, кроме Microsoft Edge и Internet Explorer)
  • начало и конец (поддерживается всеми браузерами, кроме Microsoft Edge и Internet Explorer)

Предположим, мы хотим центрировать элементы

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

-е {
выравнивание текста: слева;
}

td {
выравнивание текста: центр;
}
 

Наш код возвращает:

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

Выравнивание текста по вертикали

Свойство CSS vertical-align используется для указания вертикального выравнивания содержимого в тегах

или . По умолчанию для свойства vertical-align установлено значение middle , что означает, что содержимое выровнено по вертикали по середине ячейки.

Предположим, мы хотим выровнять текст в наших ячейках

по нижнему краю ячеек. Мы можем сделать это с помощью этого кода:

 td {
высота: 40 пикселей;
вертикальное выравнивание: снизу;
}
 

Наш код возвращает:

В этом примере мы устанавливаем высоту каждой ячейки

на 40 пикселей. Затем мы выровняли содержимое этих ячеек по вертикали по нижнему краю ячеек.

Горизонтальные границы

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

и .

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

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

Наш код возвращает:

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

Наведение мыши (: наведение)

Если вы используете в коде селектор: hover, браузер будет выделять строки таблицы, когда пользователь наводит на них указатель мыши.

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

Предположим, мы хотим, чтобы цвет фона строк (

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

Полосатый узор

При разработке таблицы вы можете использовать подход в стиле зебры. В этом стиле цвета строк чередуются между двумя цветами. Это создает эффект полосатой зебры. Для выполнения этой задачи мы можем использовать селектор nth-child ().

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

 tr: nth-child (even) {
цвет фона: светло-серый;
}
 

Наш код возвращает:

Мы устанавливаем светло-серый цвет фона каждой четной строки в нашей таблице.

Если мы хотим установить светло-серый цвет фона строк с нечетными номерами в нашей таблице, мы можем указать «нечетные» вместо «четных» в приведенном выше коде.

Пустые ячейки

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

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

  • hide : скрывает цвет фона и границы.
  • показать : показывает цвет фона и границы.

Свойство CSS empty-cells работает только в том случае, если для параметра border-collapse установлено значение отделения. Это значит, что границы не рухнули.

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

 table {
пустые ячейки: скрыть;
граница-коллапс: раздельный;
}
 

Наш код возвращает:

В этом примере мы удалили значение Weeks on List для книги Where the Crawdads Sing .Поскольку эта ячейка не содержит значения, когда мы указываем скрытие значения для атрибута empty-cells, таблица скрывает элемент границы, который в противном случае был бы применен к ячейке.

Заключение

CSS предлагает ряд свойств, используемых для стилизации таблиц. К ним относятся свойство padding (добавляет пространство между содержимым ячейки и ее границами) и свойство text-align (выравнивает текст внутри ячейки).

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

.

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

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