Как сделать таблицу в css?

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 Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS 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 SpecificityCSS !important

More Advanced Table Styles

Horizontal Borders

You can set CSS table borders as horizontal dividers of rows. To achieve this effect, we need the  property.

We define  values that indicate its width, style, and color in one declaration.

Example Copy

Firstname	Lastname	Age
Josh	Jibbrings	35
Nancy	Ollion	26
Ben	Anderson	28
Tom	Rickler	45

Mouse Over

The  selector makes tables more interactive. When users hover their mouse cursors over a column or row, the tables change one or multiple of its styling properties.

For instance, you can modify the HTML table background color every time users hover over the rows:

Example Copy

Colors

You set HTML table background colors to make the content more engaging and noticeable. Using color and background-color properties, we can assign exciting colors to the content of our table and its background.

Firstname	Lastname	Age
Josh	Jibbrings	35
Nancy	Ollion	26
Ben	Anderson	28
Tom	Rickler	45

You can style HTML table elements with background colors separately. can have one color, while other elements have another.

Example Copy

Zebra-Striped Design

To make two background colors interchange every two lines, we use nth-child() selector.

Paired with background-color property, it helps us achieve the zebra effect.

To determine the background color, we use the same indicators as before.

Example Copy

TABLES

1) Rotated Table Headers

Column Header Rotation in CSS

Tutorial/codes – Demo

Author:Chris Coyier

Created:MARCH 24, 2014

Made with:HTML, CSS(SCSS)

2) Angular material table

Angular matarial table is simply directive that allows you with no effort make good looking table in Google Material style.

Tutorial/codes – Demo

Author:sntr

Created:NOVEMBER 02, 2015

Made with:HTML, CSS and JavaScript

3) Sticky Table Headers & Columns

A tutorial on how to create sticky headers and columns for tables using jQuery. The solution is an alternative to other sticky table header approaches and it addresses the overflowing table problem including adding support for biaxial headers.

Tutorial/codes – Demo

Author:Mike

Created:NOVEMBER 04, 2015

Made with:HTML, CSS(SCSS) and JavaScript

4) HTML / Javascript – Expand and collapse table rows

HTML / Javascript – Expand and collapse table rows with checkbox

Tutorial/codes – Demo

Author:Wes Head

Created:JULY 02, 2013

Made with:HTML(Slim), CSS(Sass) and JavaScript

5) Data table using jquery datatable in Angularjs

html table using angularjs and jquery datatable

Tutorial/codes – Demo

Author:Kurtis

Created:AUGUST 01, 2016

Made with:HTML, CSS and JavaScript

6) Responsive Table with DataTables

Responsive Table with DataTables

Tutorial/codes – Demo

Author:SitePoint

Created:APRIL 15, 2015

Made with:HTML, CSS and JavaScript

7) Responsive Table

This demo shows how to change the style and layout of a table according to the available space.

Tutorial/codes – Demo

Author:Iván Villamil

Created:FEBRUARY 22, 2016

Made with:HTML, CSS(SCSS)

8) A Better Fluid Responsive Table

Developed with JavaScript and semantic markup.

Tutorial/codes – Demo

Author:Dudley Storey

Created:APRIL 01, 2014

Made with:HTML, CSS and JavaScript

9) Header Tabel Fix dengan CSS3

Header Tabel Fix dengan CSS3

Tutorial/codes – Demo

Author:Dumet_School

Created:APRIL 08, 2017

Made with:HTML, CSS

10) Table (Project panel web app)

Table (Project panel web app)

Tutorial/codes – Demo

Author:Varo

Created:FEBRUARY 15, 2016

Made with:HTML, CSS

11) Responstable 2.0: a responsive table solution

Responstable is a CSS solution for responsive tables. It uses the HTML5 attribute data-th and the pseudo :after to create a alternate column header when in mobile view. Because it is designed mobile first you will need the respond.js

Tutorial/codes – Demo

Author:Jordy van Raaij

Created:FEBRUARY 18, 2014

Made with:HTML, CSS and JavaScript

12) Crisp table

Style a Simple Data Table

Tutorial/codes – Demo

Author:charlie hield

Created:AUGUST 29, 2012

Made with:HTML, CSS(SCSS) and JavaScript

Styling Tables With CSS

Before starting to apply CSS properties, take a look at an example of a traditional HTML table.

Country	Price	Duration
Austria	340$	1 week
Mexico	1750$	1 month
Sweden	460$	1 week
Germany	520$	2 weeks

border

HTML table borders separate sections. CSS border shorthand property sets borders in one declaration.

Hello	I’m	a table
and I	have a	border

The example below specifies the border width, color, and style for <table>, <th>, and <td> elements. Notice the effect of double borders:

Example Copy

border-collapse

You can remove the double border effect with the property of CSS. Table borders will then collapse into one and prevent gaps.

Example Copy

border-spacing

The  property sets the spacing between cells in a table. Its values determine horizontal and vertical spacing and use length indicators (px, cm, pt, etc.).

Hello	I’m	a table
and m	borders	are spacious

In the example below, we use  on uncollapsed table borders:

Example Copy

The property accepts either one or two values:

• One value indicates both the vertical and horizontal spacing of table borders in HTML.
• Two values: the first value sets the horizontal spacing, while the second sets the vertical.

caption-side

The sets the position of the table <caption>. You can use and keywords to indicate the position.

This is my caption

Hello

I’m

a table

In the example, we position our caption at the bottom of the table:

Example Copy

empty-cells

The property indicates whether cells without any content should have borders and backgrounds.

	Hello I’m			a table
	and some of	my cells		are empty

Here are the main points:

• The property can have and values. When set to , borders and backgrounds of empty cells will not be shown.
• works only if the is .

The following example uses  on empty cells:

Example Copy

table-layout

The specifies the algorithm applied to organize cells, rows, and columns of tables. It can have two values:

• calculates the width of tables and cells according to the content inside.
• sets that the width of table and columns depend on the and elements. The width can also depend on the first row of cells.

In the example, you see the differences between the two  values:

My	layout
is	auto

My	layout
is	fixed

Example Copy

width and height

To determine dimensions of the CSS table, we need two styling properties: width and .

Firstname	Lastname	Savings
Josh	Jibbrings	$35
Nancy	Ollion	$26
Ben	Anderson	$28
Tom	Rickler	$45

• The property describes how much the table should stretch horizontally.
• The property determines the vertical parameters.
• We can set these values using length indicators (pt, px, cm, etc.) or percentages (%).

The following example sets the for the table, and for the element:

Example Copy

text-align

The text-align property determines the horizontal alignment of a table.

Example Copy

The property can have the following values:

• , , : supported by all browsers except Internet Explorer and Microsoft Edge.
• and : supported by all browsers except Internet Explorer and Microsoft Edge.
• : does not work in Microsoft Edge, Internet Explorer, and Safari.
• : does not work in any browser.
• for a character-based alignment: does not work in any browser.

Firstname	Lastname	Savings
Josh	Jibbrings	$35
Nancy	Ollion	$26
Ben	Anderson	$28
Tom	Rickler	$45

vertical-align

The vertical-align property sets the vertical alignment of inline content and cells. The most common values are top, middle, bottom. Same as with  we can choose the vertical alignment of header and table data separately.

Firstname	Lastname	Age
Josh	Jibbrings	35
Nancy	Ollion	26
Ben	Anderson	28
Tom	Rickler	45

Example Copy

padding

The padding property manipulates space between the content of tables and borders.

The property accepts length indicators (pt, px, cm, etc.), or percentages (%) as values.

Firstname	Lastname	Age
Josh	Jibbrings	35
Nancy	Ollion	26
Ben	Anderson	28
Tom	Rickler	45

Example Copy

Рамка таблицы

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

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

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

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

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

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      table, td, th { 
	    border: 4px outset blue;
		border-spacing: 5px;
	  }
      .first { border-collapse: collapse; }
    </style>
  </head>

  <body>
    <table>
      <tr><th>Имя</th><th>Фамилия</th></tr>
      <tr><td>Гомер</td><td>Симпсон</td></tr>
      <tr><td>Мардж</td><td>Симпсон</td></tr>
    </table>
    <br>
    <table class="first">
      <tr><th>Имя</th><th>Фамилия</th></tr>
      <tr><td>Гомер</td><td>Симпсон</td></tr>
      <tr><td>Мардж</td><td>Симпсон</td></tr>
    </table>
  </body>
</html>

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

Границы и рамки

Чтобы чётко отделить содержимое одной ячейки от другой, к ячейкам добавляются границы. За их создание отвечает стилевое свойство border, которое применяется к элементам (<td> или <th>). Однако здесь нас подстерегают подводные камни. Поскольку рамка создаётся для каждой ячейки, то в местах соприкосновения ячеек получается граница удвоенной толщины. Для устранения указанной особенности существует несколько путей. Самый простой — воспользоваться свойством border-collapse со значением collapse. В его задачу входит отслеживать соприкосновение линий и вместо двойной границы изображать одинарную. Это свойство достаточно добавить к селектору table, а дальше оно всё сделает самостоятельно (пример 6).

Пример 6. Применение свойства border-collapse при создании рамок таблицы

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Таблица</title>
<style>
table {
border-collapse: collapse; /* Убираем двойные линии */
width: 100%; /* Ширина таблицы */
border-spacing: 0; /* Расстояние между ячеек */
}
td {
border: 2px solid #333; /* Параметры границ */
padding: 4px; /* Поля в ячейках */
text-align: center; /* Выравнивание по центру */
}
</style>
</head>
<body>
<table>
<tr><td>O</td><td>X</td><td>X</td></tr>
<tr><td>O</td><td>O</td><td>X</td></tr>
<tr><td>X</td><td>X</td><td>O</td></tr>
</table>
</body>
</html>

Разница между границами таблицы при добавлении свойства border-collapse, а также без него, представлена на рис. 4.

а — свойство не установлено

б — свойство установлено

Рис. 4. Вид таблицы при использовании border-collapse

На рис. 4а показана рамка таблицы, используемая по умолчанию

Обратите внимание, что внутри таблицы все линии имеют удвоенную толщину. Добавление border-collapse убирает эту особенность, и толщина всех линий становится одинаковой (рис. 4б)

Линии не обязательно делать для всех сторон ячеек, согласно дизайну они могут отделять одну строку или колонку от другой. Для этого мы используем свойства border-bottom, border-left и другие подобные. Применять границы к элементам <tr>, <thead>, <tfoot> и <tbody> нельзя, поэтому добавляем их к селектору table и td (пример 7).

Пример 7. Линии между строк

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Таблица</title>
<style>
table {
width: 100%; /* Ширина таблицы */
border-collapse: collapse; /* Убираем двойные линии */
border-bottom: 2px solid #333; /* Линия снизу таблицы */
border-top: 2px solid #333; /* Линия сверху таблицы */
}
td {
text-align: center; /* Выравнивание по центру */
border-bottom: 1px solid #333;
border-top: 1px solid #333;
}
td, th {
padding: 5px; /* Поля в ячейках */
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th rowspan=»2″>Вид соединения</th>
<th colspan=»2″>Поля допусков ширины шпоночного паза</th>
</tr>
<tr>
<th>Вал</th><th>Втулка</th>
</tr>
</thead>
<tbody>
<tr>
<td>Свободное</td><td>H9</td><td>D10</td>
</tr>
<tr>
<td>Нормальное</td><td>N9</td><td>I_s9</td>
</tr>
<tr>
<td>Плотное</td><td colspan=»2″>P9</td>
</tr>
</tbody>
</table>
</body>
</html>

Результат данного примера показан на рис. 5.

Рис. 5. Таблица с горизонтальными линиями

Теги и

C помощью тега <col> удобно стилизовать столбцы таблицы через CSS (не приходится писать классы для каждой ячейки в разных строках). Это крутая фишка для любого разработчика.

Как это работает:

Caption

th	th
1	2	3
1	2	3
1	2	3

У нас три ячейки и, следовательно, три столбца. Поэтому мы используем три тега <col>.

Для группировки тегов <col> применяют специальный тег <colgroup>:

<colgroup> позволяет задать стиль сразу для группы столбцов, а тег <col> внутри <colgroup> — переопределить его для отдельных столбцов в группе.

Располагать теги <colgroup>, <col> нужно перед тегами <thead>, <tbody>, <tfoot>, а если у таблицы есть тег <caption>, то после него.

Атрибут span

У тега <col> есть атрибут span, который распространяет стиль на несколько столбцов.

Например:

Caption

th	th	th	th
1	2	3	4

Первый тег <col> — это первый столбец, а второй тег <col> — второй, но из-за атрибута span, в котором мы указали значение «2», его стиль распространяется и на третий.

Definition and Usage

The property sets the style of an element’s four borders. This property can have from one to four values.

Examples:

• border-style: dotted solid double dashed;
  • top border is dotted
  • right border is solid
  • bottom border is double
  • left border is dashed
• border-style: dotted solid double;
  • top border is dotted
  • right and left borders are solid
  • bottom border is double
• border-style: dotted solid;
  • top and bottom borders are dotted
  • right and left borders are solid
• border-style: dotted;

  all four borders are dotted

Default value:	none
Inherited:	no
Animatable:	no. Read about animatable
Version:	CSS1
JavaScript syntax:	object.style.borderStyle=»dotted double» Try it

Основные элементы CSS

Как HTML состоит из тегов, атрибутов и значений, так и CSS состоит из своих собственных элементов. Суть конструкций CSS можно объяснить так: «Указать, какой элемент страницы оформить, и указать, как его оформлять». Вот составляющие конструкции CSS.

• Селектор. Идентификатор, который указывает браузеру, к какому именно элементу страницы применить оформление. Благодаря ему обозреватель «понимает», что стиль предназначен, например, для оформления списков или таблиц.
• Блок объявления стилей. Пишется после селектора и заключается в фигурные скобки. В нём задаётся стиль элемента (его оформление). Блок объявления стилей состоит из двух частей.
• Свойство. Аналог атрибута в HTML. Определяет, какое именно свойство оформления будет изменено.
• Значение. Задаётся свойству через двоеточие и определяет, как именно свойство будет изменено.

Свойств и значений в блоке объявления стилей может быть несколько, в таком случае они перечисляются через точку с запятой.

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

Чередование фонового цвета строк таблицы

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      table {
        width: 70%;
        border-collapse: collapse;
      }
      td, th {
        border: 1px solid #98bf21;
        padding: 3px 7px 2px 7px;
      }
      th {
        text-align: left;
        padding: 5px;
        background-color: #A7C942;
        color: #fff;
      }
      .alt td { background-color: #EAF2D3; }
    </style>
  </head>
  <body>
    <table>
      <tr><th>Имя</th><th>Фамилия</th><th>Положение</th></tr>
      <tr><td>Гомер</td><td>Симпсон</td><td>отец</td></tr>
      <tr class="alt"><td>Мардж</td><td>Симпсон</td><td>мать</td></tr>
      <tr><td>Барт</td><td>Симпсон</td><td>сын</td></tr>
      <tr class="alt"><td>Лиза</td><td>Симпсон</td><td>дочь</td></tr>
    </table>
  </body>
</html>

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

Добавлять атрибут к каждой второй строке довольно утомительное занятие. В CSS3 был добавлен псевдо-класс :nth-child, позволяющий решить эту проблему альтернативным путем. Теперь эффекта чередования можно достичь исключительно средствами CSS, не прибегая к изменению HTML-разметки документа. С помощью псевдо-класса можно выбрать все четные или нечетные строки таблицы, используя одно из ключевых слов: (четные) или (нечетные):

tr:nth-child(odd) { background-color: #EAF2D3; }

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

How To Create a Comparison Table

Step 1) Add HTML:

Example

<!— Font Awesome Icon Library —><link rel=»stylesheet» href=»https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css»><table>  <tr>    <th
style=»width:50%»>Features</th>    <th>Basic</th>   
<th>Pro</th>  </tr>  <tr>    <td>Sample
text</td>    <td><i class=»fa fa-remove»></i></td>   
<td><i class=»fa fa-check»></i></td>  </tr>  <tr>   
<td>Sample text</td>    <td><i class=»fa fa-check»></i></td>   
<td><i class=»fa fa-check»></i></td>  </tr></table>

Step 2) Add CSS:

Example

/* Style the table */table {  border-collapse: collapse;  border-spacing: 0; 
width: 100%;  border: 1px solid #ddd;}/* Style table
headers and table data */th, td {  text-align: center; 
padding: 16px;}th:first-child,
td:first-child {  text-align: left;}/* Zebra-striped
table rows */tr:nth-child(even) {  background-color: #f2f2f2}.fa-check {  color: green;}.fa-remove {  color:
red;}

❮ Previous
Next ❯

Будущее за CSS3

Cascading Style Sheets3 (CSS3) — третье поколение стандарта CSS, которое сейчас находится в активной разработке. Как HTML5 для HTML, так и CSS3 для CSS стал самой масштабной ревизией в истории стандарта.

В отличие от предыдущих версий, спецификация разбита на модули, разработка и развитие которых идут независимо. То есть CSS3 — это тоже не просто стандарт, а «набор технологий», как и HTML5. Эти технологии понемножку проникают в браузеры. Каждая новая версия Chrome или Firefox поддерживает какой-то новый кусочек CSS3, несколько новых свойств. То есть с каждым месяцем расширяются наши возможности по оформлению документов.

За ходом разработки CSS3 можно следить на странице Консорциума W3C. Кстати, уже началась разработка стандарта CSS4, но пока все его спецификации находятся в статусе черновиков.

Есть ключевое различие

Как и те, кто учился по «CSS Zen Garden», я испытываю отвращение к табличной вёрстке в HTML. Сам того не понимая, я позволял обманчивым предубеждениям ввести себя в заблуждение, преувеличивая взаимосвязь между HTML- и CSS-таблицами.

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

Ниже вы найдёте несколько примеров использования :

Динамическое вертикальное выравнивание по центру

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

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

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

Динамическое горизонтальное выравнивание по центру

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

Благодаря @mojtabaseyedi я нашёл новый способ выравнивать динамические элементы по горизонтали без побочных эффектов. Нужно применить к динамическому элементу и .

Адаптивная вёрстка

Уменьшите окно до , чтобы увидеть адаптивность в действии.

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

Порядок следования меняется с 1-2-3 на 2-3-1

Можно даже изменить порядок следования блочных элементов. Подробнее об этом приёме можно почитать здесь.

Динамический прилипающий подвал

Динамический прилипающий подвал

Прилипающий подвал должен соответствовать двум требованиям:

1. Подвал должен прилипать к низу страницы, когда основного контента слишком мало, чтобы заполнить всю страницу по высоте.
2. Подвал должен следовать в потоке как обычно, если объём контента превышает высоту страницы.

Если вы когда-нибудь искали решение этой задачи, то вам, возможно, попадались эти полезные варианты от Chris Coyier и Ryan Fait.

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

Разметка «Holy Grail»

Разметка «Holy Grail» (от A List Apart) — это вариант разметки страницы с шапкой, тремя равными по высоте колонками (две фиксированных боковых колонки и тянущийся центр) и прилипающим подвалом.

Разметка «Holy Grail»

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

1. Центральная колонка должна тянуться, а боковые — иметь фиксированную ширину.
2. Центральная колонка может идти первой в разметке.
3. Любая колонка может быть больше остальных по высоте.

Разметка «Holy Grail» с помощью

В примере выше показана разметка «Holy Grail». Можете менять размеры окна, чтобы средняя колонка тянулась по ширине; также можно добавить контент, чтобы посмотреть, как работает прилипающий подвал. Единственное требование, которому эта разметка не соответствует, — это пункт 2: «Центральная колонка может идти первой в разметке».

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

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS Image ReflectionCSS object-fitCSS object-positionCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

Выравнивание содержимого таблицы (по горизонтали и вертикали)

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

И если с выравниванием по вертикали все понятно (у тэгов TABLE, TR и TD есть атрибут ALIGN). То как выровнять по горизонтали не совсем понятно.

Для выравнивания содержимого таблицы, строки или ячейки по горизонтали существует атрибут VALIGN. И этот атрибут имеет свои параметры TOP (выравнивание по верхнему краю), MIDDLE (по середине), BOTTOM (по нижнему краю).

Для нашей шапки установим  выравнивание по центру, по середине.

 <TR ALIGN="CENTER" VALIGN=”MIDDLE”> 
 

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

 <HTML>
<HEAD>
<TITLE>Телефонный справочник </TITLE>
</HEAD>
<BODY>
<P ALIGN="CENTER">
<TABLE BORDER=1 BorderCOLOR=”#006600” width="400" BGCOLOR="#FFFFCC">
<TR BGCOLOR=”#99CC33” HEIGHT="50" VALIGN="MIDDLE" ALIGN="CENTER">
<TD WIDTH="50">№</TD>
<TD>Фамилия</TD>
<TD>Номер телефона</TD>
</TR>
<TR>
<TD ALIGN="CENTER" BGCOLOR=”#FFFF99”>1</TD>
<TD>Фрося Бурлакова</TD>
<TD ALIGN="CENTER">8-952-987-13-20</TD>
</TR>
<TR>
<TD ALIGN="CENTER" BGCOLOR=”#FFFF99”>2</TD>
<TD>Иван Петров</TD>
<TD ALIGN="CENTER">8-918-964-70-11</TD>
</TR>
<TR>
<TD ALIGN="CENTER" BGCOLOR=”#FFFF99”>3</TD>
<TD>Афоня Ивлев</TD>
<TD ALIGN="CENTER">8-961-594-12-45</TD>
</TR>
</TABLE>
</P>
</BODY>
</HTML> 
 

В браузере увидим:

More Examples

Example

A dashed border:

div {border-style: dashed;}

Example

A solid border:

div {border-style: solid;}

Example

A double border:

div {border-style: double;}

Example

A groove border:

div {  border-style: groove;  border-color: coral;
  border-width: 7px;}

Example

A ridge border:

div {  border-style: ridge;  border-color: coral;  border-width: 7px;}

Example

An inset border:

div {  border-style: inset;  border-color: coral;
  border-width: 7px;}

Example

An outset border:

div {  border-style: outset;  border-color: coral;  border-width: 7px;}

Example

Set different borders on each side of an element:

p.one {border-style: dotted solid dashed double;}
p.two {border-style: dotted solid dashed;}
p.three {border-style: dotted solid;}
p.four {border-style: dotted;}

Property Values

Value	Description	Play it
auto	Browsers use an automatic table layout algorithm. The column width is set by the widest unbreakable content in the cells. The content will dictate the layout	Play it »
fixed	Sets a fixed table layout algorithm. The table and column widths are set by the widths of table and col or by the width of the first row of cells. Cells in other rows do not affect column widths. If no widths are present on the first row, the column widths are divided equally across the table, regardless of content inside the cells	Play it »
initial	Sets this property to its default value. Read about initial	Play it »
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Make a fancy table
This example demonstrates how to create a fancy table.

Set the position of the table caption
This example demonstrates how to position the table caption.

CSS Table Properties

Property	Description
border	Sets all the border properties in one declaration
border-collapse	Specifies whether or not table borders should be collapsed
border-spacing	Specifies the distance between the borders of adjacent cells
caption-side	Specifies the placement of a table caption
empty-cells	Specifies whether or not to display borders and background on empty cells in a table
table-layout	Sets the layout algorithm to be used for a table

❮ Previous
Next ❯

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgapgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightrow-gapscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index