Css-таблицы

Another Example

Here are more examples of using CSS borders around your HTML tables.

HTML Tags

About HTML.am

HTML.am was created in order to provide HTML tools, codes, tutorials, and other resources to help webmasters create and maintain their HTML documents.

HTML.am aims primarily at beginners, but may also be useful to web professionals.

The HTML codes on this website are provided free of charge, for you to use however you wish. Feel free to modify the code to suit your own needs.

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Style
Font Size
Font Google
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS TablesCSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

Border Collapse

You can remove the space between the different borders by using the CSS property. You can apply this property against the HTML table element.

When you apply this against the table element, you’ll notice that the table border simply disappears, or «collapses». You’ll also notice that the space between the cells collapse too.

Example:

Замена атрибутов таблиц на стили CSS

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

Атрибут align

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

Обратите внимание, атрибут выравнивает не текст, а сам блок таблицы. Аналогом CSS в данном случае является комбинация свойств:

/* аналог align="left" */
table {
    display: table;
    margin-right: auto;
}

/* аналог align="center" */
table {
    display: table;
    margin-left: auto;
    margin-right: auto;
}

/* аналог align="right" */
table {
    display: table;
    margin-left: auto;
}

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

Атрибут background

Данный атрибут позволяет задать фоновое изображение для всей таблицы, указав его URL-адрес в качестве значения. Контролировать поведение такого фона нет возможности, в отличие от аналога CSS — свойства и других свойств для настройки фона.

/* аналог background="img/bg.png" */
table {
    background-image: url(img/bg.png);
}

Атрибут bgcolor

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

/* аналог bgcolor="#eaeaea" */
table {
    background-color: #eaeaea;
}

Атрибуты border, bordercolor и frame

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

/* аналоги border="1" и bordercolor="#eee" */
table {
    border: 1px solid #eee;
}

Если в CSS задано свойство , оно перекроет значение атрибута. Такое же поведение будет и в случае с другими атрибутами, имеющими точный аналог в CSS.

Атрибут rules

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

/* аналог rules="cols" */
td {
    border-right: 1px solid black;
}

Атрибут cellpadding

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

/* аналог cellpadding="10" */
td {
    padding: 10px;
}

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

Атрибут cellspacing

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

/* аналог cellspacing="10" */
table {
    border-spacing: 10px;
}

Атрибуты width и height

Разумеется, эти атрибуты можно легко заменить на CSS и :

/* аналоги width="500" и height="500" */
table {
    width: 500px;
    height: 500px;
}

Завершение

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

Далее в учебнике: CSS-стили для форм.

Responsive Equal Height

The columns we made in the previous example are responsive (if you resize the browser window in the try it example, you will see that they automatically adjust to the necessary width and height). However, for small screens (like smartphones), you might want them to stack vertically instead of horizontally:

On medium and large screens:

Hello World.

Hello World.

Hello World.

Hello World.

Hello World.

On small screens:

Hello World.

Hello World.

Hello World.

Hello World.

Hello World.

To achieve this, add a media query and specify a breakpoint pixel value for when this should happen:

Example

/* If the browser window is smaller than 600px, make the columns stack on top
of each other */@media only screen and (max-width: 600px) {  .col {
    display: block;   
width: 100%;  }}

Как создать таблицу CSS

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

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

Наверняка вы работали с таблицами HTML раньше. Если да, то у вас не будет проблем с созданием таблиц CSS.

Каждый элемент таблицы HTML имеет эквивалент в CSS.  Единственное отличие заключается в отсутствии отличий между и в варианте CSS.

Ниже приводится список элементов таблиц HTML и соответствующие им значения CSS.

table     { display: table }

tr        { display: table-row }

thead     { display: table-header-group }

tbody     { display: table-row-group }

tfoot     { display: table-footer-group }

col       { display: table-column }

colgroup  { display: table-column-group }

td, th    { display: table-cell }

caption   { display: table-caption }

Подписи могут быть размещены сверху или снизу таблицы с помощью свойства :

#caption {caption-side: top}

#caption {caption-side: bottom}

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

<div id="table">

  <div class="row">

    <span class="cell"></span>

    <span class="cell"></span>

     <span class="cell"></span>

  </div>

  <div class="row">

    <span class="cell"></span>

    <span class="cell"></span>

     <span class="cell"></span>

  </div>

  <div class="row">

    <span class="cell"></span>

    <span class="cell"></span>

     <span class="cell"></span>

  </div>

</div>

#table {display: table;}

.row {display: table-row;}

.cell {display: table-cell;}

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

Совсем небольшой код CSS представляет элементы  и в виде таблицы.

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

Столбцы и их группировка

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

• border — обычное свойство, пока свойство border-collapse не используется для элемента таблицы;
• background — обычное свойство, пока строка и ячейка имеют прозрачный фон;
• width — установка ширины столбца;
• visibility — если имеет значение collapse (единственное доступное значение), то ячейка столбца не будет выводиться (она объединяется с другими столбцами и ширина таблицы выравнивается).

HTML Tutorial

HTML HOMEHTML IntroductionHTML EditorsHTML BasicHTML ElementsHTML AttributesHTML HeadingsHTML ParagraphsHTML StylesHTML FormattingHTML QuotationsHTML CommentsHTML Colors
Colors
RGB
HEX
HSL

HTML CSSHTML Links
Links
Link Colors
Link Bookmarks

HTML Images
Images
Image Map
Background Images
The Picture Element

HTML TablesHTML Lists
Lists
Unordered Lists
Ordered Lists
Other Lists

HTML Block & InlineHTML ClassesHTML IdHTML IframesHTML JavaScriptHTML File PathsHTML HeadHTML LayoutHTML ResponsiveHTML ComputercodeHTML SemanticsHTML Style GuideHTML EntitiesHTML SymbolsHTML EmojisHTML CharsetHTML URL EncodeHTML vs. XHTML

Responsive Table — Отзывчивая (адаптивная) таблица

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

Добавьте элемент контейнера (например, ) с помощью вокруг элемента , чтобы сделать его адаптивным:

Пример

<div style=»overflow-x:auto;»><table>
… table content …</table></div>

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

Размер таблицы

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

th, td { padding: 7px; }

Попробовать »

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

table { width: 70%; }
th { height: 50px; }

Попробовать »

Using CSS Classes

If you’re familiar with HTML and CSS, you’ll probably know about the benefits of CSS classes. CSS classes allow you to set all your styles in one place, rather than adding them to each HTML element as you code. This saves time in coding and time in maintaining your website. It also reduces the possibility of error, helps with download time, and helps keep your code nice and clean.

Here’s an example of using an embedded style sheet to define the border of your HTML tables. Note that the styles are set in between the opening and closing tags.

Нужно ли использовать таблицы CSS?

Лучше ли таблицы CSS чем таблицы HTML? Если да, то в чем их преимущества? Если нет, то почему их не надо использовать? Хорошие вопросы, на которые нет однозначного ответа.

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

• Дополнительное кодирование — таблицы HTML требуют дополнительного кодирования структуры в сравнении с элементами . Но и таблицы CSS требуют использования дополнительных классов и идентификаторов.
• Жесткая структура — таблицы HTML очень жестко привязаны к содержанию. Порядок ячеек должен быть таким, каким он будет выводиться. Но такое же ограничение накладывается и на таблицы CSS/
• Вывод в браузерах  — браузеры выполняют несколько проходов по структуре HTML таблиц. Но и для CSS таблиц ситуация будет аналогичной.

В соответствии с выше сказанным у таблиц CSS нет существенных преимуществ перед таблицами HTML при использовании их в шаблонах.

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

Setting max-width

The property is used to set the maximum width of an element.

The can be specified in length values, like px, cm, etc., or in percent (%) of the
containing block, or set to none (this is
default. Means that there is no maximum width).

The problem with the above occurs when the browser window is smaller than the width of
the element (500px). The browser then adds a horizontal scrollbar to the page.

Using instead, in this situation, will improve the browser’s handling of small windows.

Tip: Drag the browser window to smaller than 500px wide, to see the difference between
the two divs!

This element has a height of 100 pixels and a max-width of 500 pixels.

Note: The value of the property overrides .

Example

This <div> element has a height of 100 pixels and a
max-width of 500 pixels: 

div {
  max-width: 500px; 
height:
100px;  background-color: powderblue;}

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

В большинстве случаев при работе с таблицами вам придется настраивать выравнивание содержимого внутри заголовочных ячеек и ячеек данных. Свойство text-align применяется для горизонтального выравнивания по аналогии с любой текстовой информацией. Применение этого свойства для текста мы рассматривали ранее в статье «Форматирование текста в CSS».

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

<!DOCTYPE html>
<html>
<head>
	<title>Пример горизонтального выравнивания в таблице</title>
<style> 
table {
border-collapse: collapse; /* объединяем границы ячеек в одну */	
}
td, th {
border: 1px solid; /* задаем сплошную границу размером 1 пиксель */
}
.left {
text-align: left; /* выравнивает текст ячейки влево */
}
.right {
text-align: right; /* выравнивает текст ячейки вправо */
}
.center {
text-align: center; /* выравнивает текст ячейки по центру */
}
.justify {
text-align: justify; /* выравнивает текст ячейки по ширине */
}
</style>
</head>
	<body>
		<table>
			<tr>
				<th>Значение</th><th>Описание</th>
			</tr>
			<tr class = "left">
				<td>left</td><td>Выравнивает текст ячейки влево. Это значение по умолчанию (если направление текста слева направо).</td>
			</tr>
			<tr class = "right">
				<td>right</td><td>Выравнивает текст ячейки вправо. Это значение по умолчанию (если направление текста справа налево).</td>
			</tr>
			<tr class = "center">
				<td>center</td><td>Выравнивает текст ячейки по центру.</td>
			</tr>
			<tr class = "justify">
				<td>justify</td><td>Растягивает линии так, что каждая линия имеет одинаковую ширину (растягивает текст ячейки по ширине).</td>
			</tr>
		</table>
	</body>
</html>

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

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

Рис. 149 Пример горизонтального выравнивания в таблице.

Кроме горизонтального выравнивания вы также можете определить и вертикальное выравнивание в ячейках таблицы с помощью свойства vertical-align.

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

* — Значения sub, super, text-top, text-bottom, length и %, примененные к ячейке таблицы будут вести себя как при использовании значения baseline.

Рассмотрим пример использования:

<!DOCTYPE html>
<html>
<head>
	<title>Пример вертикального выравнивания в таблице</title>
<style> 
table {
border-collapse: collapse; /* объединяем границы ячеек в одну */	
}
td, th {
border: 1px solid; /* задаем сплошную границу размером 1 пиксель */
height: 55px; /* задаем высоту ячеек */
}
.baseline {
vertical-align: baseline; /* выравнивает базовую линию ячейки по базовой линии родителя */
}
.top {
vertical-align: top; /* выравнивает содержимое ячейки вертикально по верхнему краю */
}
.middle {
vertical-align: middle; /* выравнивает содержимое ячейки вертикально по середине */
}
.bottom {
vertical-align: bottom; /* выравнивает содержимое ячейки вертикально по нижнему краю */
}
</style>
</head>
	<body>
		<table> 
			<tr>
				<th>Значение</th><th>Описание</th>
			</tr>
			<tr class = "baseline"> 
				<td>baseline</td><td>Выравнивает базовую линию ячейки по базовой линии родителя. Это значение по умолчанию.</td>
			</tr>
			<tr class = "top"> 
				<td>top</td><td>Выравнивает содержимое ячейки вертикально по верхнему краю.</td>
			</tr>
			<tr class = "middle"> 
				<td>middle</td><td>Выравнивает содержимое ячейки вертикально по середине.</td>
			</tr>
			<tr class = "bottom"> 
				<td>bottom</td><td>Выравнивает содержимое ячейки вертикально по нижнему краю.</td>
			</tr>
		</table> 
	</body>
</html>

В этом примере мы создали четыре класса, которые задают различное вертикальное выравнивание в ячейках и применили их по порядку к строкам таблицы. Значение в ячейке соответствует значению свойства vertical-align, которое было применено к этой строке.

Рис. 150 Пример вертикального выравнивания в таблице.

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

Рассмотрим теги для создания таблицы:

1
2
3
4
5

<table>
	<tr>
		<td> содержание <td>
	<tr>
<table>

Результат:
Добавим границу для таблицы — атрибут :

1
2
3
4
5

<table border="1">
	<tr>
		<td> содержание <td>
	<tr>
<table>

Результат:

Создания таблицы начинается с тега (от англ. «таблица»). Тег служит для создания строки. В строке располагаются ячейки — тег . Завершается таблица закрывающим тегом

Или пример таблицы посложнее:

Атрибуты тега TABLE

Важно: Для ячеек-заголовка таблицы используется тег вместо. Браузер размещает содержимое таких ячеек по центру и делает шрифт полужирным

Атрибуты тега TD или TH — ячейки

Важно:

• Тег служит для создания заголовка таблицы
• Для группировки заголовочных ячеек используется тег
• Для группировки основного содержимого таблицы используется тег
• Тег определяет нижнюю часть таблицы

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

Пример: Создать «каркас» таблицы со всеми тегами группировки

Выполнение:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<table  border="1">
<caption>таблица<caption>
<thead>
	<tr>
	<th>Заголовок 1<th><th>3аголовок 2<th>
	<tr>
<thead>
<tbody>
	<tr>
	<td>содержимое<td><td>содержимое<td>
	<tr>
<tbody>
<tfoot>
...
<tfoot>
<table>

Лабораторная работа №1: Создайте таблицу по образцу. У таблицы должен быть заголовок и области для группировки (thead — 1-я строка таблицы, tbody — 2-я и 3-я строки таблицы, tfoot — 4-я строка таблицы).

How To Create Equal Height Columns

When you have columns that should appear side by side, you’ll often want them to be of equal height (matching the height of the tallest).

<div class=»col-container»>  <div class=»col»>   
<h2>Column 1</h2>    <p>Hello World</p>  </div>  <div class=»col»>    <h2>Column 2</h2>   
<p>Hello World!</p>    <p>Hello World!</p>   
<p>Hello World!</p>    <p>Hello World!</p>  </div>  <div class=»col»>    <h2>Column 3</h2>   
<p>Some other text..</p>    <p>Some other text..</p> 
</div></div>

Step 2) Add CSS:

.col-container {    display: table; /* Make the
container element behave like a table */    width: 100%; /*
Set full-width to expand the whole page */}.col {   
display: table-cell; /* Make elements inside the container behave like table
cells */}

Форматирование таблиц

1. Границы таблицы border

Таблица и ячейки внутри неё по-умолчанию отображаются в браузере без видимых границ. Границы таблицы
задаются свойством border:

Table {
border-collapse: collapse; /*убираем пустые промежутки между ячейками*/
border: 1px solid grey; /*устанавливаем для таблицы внешнюю границу серого цвета толщиной 1px*/
}

Границы ячеек заголовка
каждого столбца задаются для элемента th:

Th {border: 1px solid grey;}

Границы ячеек
тела таблицы задаются для элемента td:

Td {border: 1px solid grey;}

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

Th, td {border: 1px solid grey;}

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

Table {border: 3px solid grey;}

Границы можно задавать частично:

/* устанавливаем для таблицы внешнюю границу серого цвета толщиной 3px */
table {border-top: 3px solid grey; }
/* задаём для ячейки тела таблицы границу серого цвета толщиной 1px */
td {border-bottom: 1px solid grey;}

Подробнее о свойстве border вы можете прочитать .

2. Как задать ширину и высоту таблицы

По умолчанию ширина и высота таблицы
определяется содержимым её ячеек. Если ширина не задана, то она будет равна ширине самого широкого ряда (строки).

Ширина таблицы и столбцов
задаётся с помощью свойства width . Если для таблицы задано table {width: 100%;} , то ширина таблицы будет равна ширине блока-контейнера, в котором она находится.

Ширину таблицы и столбцов обычно задают в px или % , например:

Table {width: 600px;}
th {width: 20%;}
td:first-child {width: 30%;}

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

Фон и границы¶

• background
• background-attachment
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-position-x
• background-position-y
• background-repeat
• background-size

• border
• border-bottom
• border-bottom-color
• border-bottom-left-radius
• border-bottom-right-radius
• border-bottom-style
• border-bottom-width
• border-collapse
• border-color
• border-image
• border-image-outset
• border-image-repeat
• border-image-slice
• border-image-source
• border-image-width
• border-left
• border-left-color
• border-left-style
• border-left-width
• border-radius
• border-right
• border-right-color
• border-right-style
• border-right-width
• border-style
• border-top
• border-top-color
• border-top-left-radius
• border-top-right-radius
• border-top-style
• border-top-width
• border-width
• box-shadow

Introduction to Table Border in HTML

Table Border in HTML is used to display a border around the table contents. This can be set around the table by specifying values like 0 for no border is showing around the table cells whereas value 1 is set to display a border around the table cells. Table width can be set in number values to define how much thick border users want to give around their table. One can set border either to the whole table or to a specific row or column or only for table head, everything is possible.

Syntax of the Table Border in HTML

There are multiple ways for defining table-border, let’s see the syntax for them one by one:

Web development, programming languages, Software testing & others

1. General Table border: This is generally used to define a simple border around the table like:

Example:

2. Collapsible Table border: This property is used to set a collapsible border in a single line around our table using the border-collapse property.

Example:

3. The border around the table: This property allows us to add table border only at outside edges, not to each individual table cells, simply as :

4. Dotted table border: one can simply add a dotted outline as a border to their table by using simply the following syntax as : 

5. Dashed table border: Like dotted, we can set the dashed border around our table or table cells. This could be thin or thick as per user choice by setting value.

6. Double table border: If we want to add a double outline to our table then it also possible by setting a property within CSS code and give a double border around the table.

7. Table border around table cells: This syntax helps us to give border around the individual cells or to any specific table cell with your favorite color code. In this syntax, we want to add border code value with each cell separately.

8. Table border with CSS classes: rather than setting the border to each individual table cells, CSS classes helps us to give common border code to our table This can be done by using the following syntax:

9. Table bottom border: This property of the table border is used to give horizontal dividers among the table’s th and td tag as follows:

10. Rounded table border: It will show rounded corners to the table border.

Examples of Table Border in HTML

Following are the examples of Table Border

Example #1

The following example is showing two different tables with different borders. The first table is showing a normal border around the table whereas the second table is an example of a collapsible table border format

HTML code:

Output:

Example #2

This example is showing how to set the border to the table only for the outside part with different table border types:

HTML code:

Output: This output showing a table with dotted, dashed and double border to the outside of the table.

Example showing table cells bordered in different color individual as:

HTML code:

Output:

Example #4

Another table rounded border with a border as the horizontal divider

HTML code:

Output:

Conclusion

• The table border in HTML is set by assigning value 1 to display a border around the table whereas 0 to hide border around the table.
• One can set a border around the table in various types like simple thick or thin border, collapsible, dotted, double, dashed borders.

Recommended Articles

This is a guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with respective syntax and the examples of the Table Border in HTML. You can also go through our other related articles to learn more–

1. HTML Layout
2. HTML Event Attributes
3. HTML onclick Button
4. Table Without Border in HTML

HTML Training (12 Courses, 19+ Projects, 4 Quizzes)

12 Online Courses

19 Hands-on Projects

89+ Hours

Verifiable Certificate of Completion

Lifetime Access

4 Quizzes with Solutions

Learn More

Definition and Usage

The property sets the height of an element.

The height of an element does not include padding, borders, or margins!

If the element will automatically adjust its height to allow
its content to be displayed correctly.

If is set to a numeric value (like pixels, (r)em, percentages) then if
the content does not fit within the specified height, it will overflow. How the
container will handle the overflowing content is defined by the
overflow property.

Note: The min-height and
max-height properties override the property.

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function

backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside

caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor

direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight

grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows

hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing

line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes

resize
right

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top

transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
width
word-break
word-spacing
word-wrap
writing-mode

z-index