Классы bootstrap для стилизации таблиц

Dealing with overlapping borders

When the cell margin property is set to «none», adjacent cell borders
overlap. The user agent first should check the border widths for each
of the borders involved. The one with the larger width takes precedence
over the smaller one. If both borders have the same width, then a
precedence order based on the border style properties is used to resolve
the conflict.

One possible scheme is:

        double > solid > dashed > dotted

However, it is less clear what to do with styles involving 3D
effects. Perhaps this should be left as implementation dependent?

If a cell border coincides with a table rule, then the rule takes
precedence unless the rule is absent (e.g. if it is set to «none»).
If the table padding is zero and the cell margin is «none», then the
borders for outer cells will coincide with the table frame. In this
situation the table frame takes precedence unless, it is absent (e.g.
if it is set to «none»).

Responsive Table

Таблицы в html. css-свойства для таблиц

Responsive Table is a simple colorful CSS table. The creator of this table has used modern colors to make the table attractive. Ample amount of space is given between each column and cells. The user can easily read and interact with the contents on the table. As the name implies, this is a responsive table so it easily fits on all screen sizes. Plus, you can use this design on your responsive web design. The developer has used the HTML and CSS code alone, hence you can work easily with this table design. If you are looking for modern colorful easy-to-work table design, CSS table templates like this will make your job simple.

Info / Download Demo

ШАГ 5: украшаем ссылки

Bootstrap 5 login form component

Навигационое меню все еще по-прежнему выглядит как список,
вместо меню. Давайте стилизуем его. Мы уберем маркеры списков и
переместим элементы налево, где были маркеры. Так же мы нарисуем
каждый элемент списка на белом фоне в своем черном квадрате (зачем?
просто так, потому что можем).

Мы так же не сказали какими должны быть цвета ссылок, так что
давайте добавим и это свойство: синими будут ссылки которые
пользователь еще не смотрел, пурпурными — те которые он уже
посещал. (строки 13-15 и 23-33):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  </style>
</head>

<body>

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

3d текст на css

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

И если с выравниванием по вертикали все понятно (у тэгов 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>

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

Цвет фона и текста

Для того чтобы указать фон ячейки таблицы HTML, строки или отдельной ячейки, к тегам <table>, <td> и <tr> можно применить следующие параметры:

background — в качестве фона используется изображение. Указать можно либо имя файла, либо путь к нему;
bgcolor — фоном является определённый цвет. Указать можно как название интересующего оттенка, так и шестнадцатеричный код.

Для того чтобы изменить цвет текста в таблице HTML, необходимо использовать тег <font>.

Например:

<table border="1" bgcolor="green">
<tr height="40" bgcolor="blue">
    <td><font color="white">Ячейка 1</font></td>
    <td bgcolor="red"></td>
</tr>
<tr>
    <td background="http://t2.gstatic.com/images?q=tbn:ANd9GcRfByY7DCMopoeaahCdF4Yi7HWMo89lEYTZVJb4GAew7ZlZNiPW">Ячейка 3</td>
    <td>Ячейка 4</td>
</tr>
</table>

Отступы таблицы в HTML

В HTML отступы в таблице задаются с помощью тега <table>:

cellspacing — расстояние между границами соседних ячеек;
cellpading — расстояние между содержимым и границей ячейки.

Например:

<table border="1" bgcolor="green" cellspacing="20" cellpadding="20">
<tr height="40" bgcolor="blue">
    <td><font color="white">Ячейка 1</font></td>
    <td bgcolor="red"></td>
</tr>
<tr>
    <td>
 background="http://t2.gstatic.com/images?q=tbn:ANd9GcRfByY7DCMopoeaahCdF4Yi7HWMo89lEYTZVJb4GAew7ZlZNiPW">Ячейка 3</td>
    <td>Ячейка 4</td>
</tr>
</table>

Визуальное отображение данного кода в браузере таково:

Выравнивание таблицы в HTML

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

Параметр align может иметь следующие значения:

left — выравнивание по левой границе;
right — выравнивание по правой границе;
center — выравнивание по центру.

Параметр valign может иметь такие значения:

bottom — выравнивание по нижней границе;
top — выравнивание по верхней границы;
middle — выравнивание посередине.

Пример:

<table border= "1">
 <td width="300" height="200">Текст 1</td>
   <td width="300" height="200" align="right" valign="top">Текст 2</td>
</table>

Как сделать таблицу по центру в HTML? С помощью упомянутого значения center.

Например:

<table cellpadding="0" cellspacing="0" width="100%" height="100%">
  <tr>
    <td align="center">
      <table cellpadding="60" cellspacing="4" border="1">
        <tr>
          <td>
            Текст таблицы
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Вставка изображения в HTML таблицу

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

Например:

<table border= "1">
<tr align="left"> 
   <td><img src="http://amadeya.users.photofile.ru/photo/amadeya/1288508/xlarge/42642197.jpg"></td> 
   <td> Содержимое 2 ячейки </td> </tr>
<tr align="right"> 
   <td> Содержимое 3 ячейки </td>
    <td> Содержимое 4 ячейки </td> </tr>
</table>

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

width — ширина;
height — высота;
alt — альтернативный текст, который отображается в браузере при отключенной функции отображения изображений;
title — подпись к картинке;
align — горизонтальное выравнивание;
valign — вертикальное выравнивание.

Кроме того, облачив изображение в специальный тег <a href=»страница, на которую ведёт ссылка»><img src=»имя файла.jpg»></a>, его можно использовать в качестве ссылки.

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

Соседствующие ячейки внутри одного столбца или строки можно объединить с помощью параметров rowspan и colspan тега <td>.

Объединение столбцов одной строчки выглядит так:

<table border="1">
<tr>
   <td colspan="3">Текст 2</td>
</tr>
<tr>
   <td>Текст 2</td>
   <td>Текст 3</td>
   <td>Текст 4</td>
</tr>
</table>

У HTML таблицы объединение ячеек одного столбца выглядит следующим образом:

<table border="1">
<tr>
   <td rowspan="3">Текст 1</td>
   <td>Текст 2</td>
</tr>
<tr>
   <td>Текст 3</td>
</tr>
<tr>
   <td>Текст 4</td>
</tr>
</table>

Fixed Column Table

It is not always possible to show all the data and stats in a single table. We have to provide scrolling options to help users see the complete record. Well, this CSS table template gives you that option out of the box. As the name implies it has a fixed main column and all other related fields can be scrolled horizontally. The developer has given you an ample amount of space in the column to add even longer contents without any trouble. Since this template uses HTML5 and CSS3 frameworks, you get more natural colors and a mobile responsive table. If you need to add more rows, you can add them easily, this table template can handle it.

Info / Download Demo

HTML Ссылки

HTML по АлфавитуHTML по КатегориямHTML Атрибуты ТеговHTML Атрибуты ГлобалHTML Атрибуты СобытийHTML ЦветаHTML ХолстыHTML Аудио / ВидеоHTML Наборы символовHTML DOCTYPEsHTML Кодирование URLHTML Языковые кодыHTML Коды странHTTP Ответы сервераHTTP МетодыPX в EM конвертерГорячие клавиши

HTML Теги

<!—>
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> — <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<menu>
<menuitem>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<picture>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<svg>
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>

CSS для таблиц

Чтобы оформить таблицу, необходимо задать для тега <table>, как минимум, свойство border:

Table CSS

table { border: 2px solid #124480; }

1	table{border2pxsolid#124480; }

Вид рамки вы можете выбрать по собственному усмотрению, равно как и ее цвет.

Для тегов <td>, как правило, нужно задавать внутренние отступы и рамки:

td,
th { border: 1px solid #185eb2;
padding: 10px; }

1
2
3

td,

th{border1pxsolid#185eb2;

padding10px;}

Да, и если у вас есть теги <th>, про них тоже не стоит забывать.

Что получилось:
В примере видно, что между всеми ячейками и границами таблицы и ячейками есть пустое пространство. Раньше оно определялось атрибутом для тега <table>. Но сейчас он считается устаревшим и заменяется css-свойством border-spacing:

Свойство border-spacing

table {
border: 2px solid #124480;
border-spacing: 10px;
}

1
2
3
4

table{

border2pxsolid#124480;

border-spacing10px;

}

Прямо скажем, используют его нечасто, т.к. вид таблицы с border-spacing: 10px будет таким:

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

Свойство border-collapse

table {
border: 2px solid #124480;
border-collapse: collapse;
}

1
2
3
4

table{

border2pxsolid#124480;

border-collapsecollapse;

}

Если хочется получить таблицу с разделителями между строк, стоит задать такое правило:

Разделители для строк

tr { border: 1px solid #3f7ec9; }

1	tr{border1pxsolid#3f7ec9; }

Если необходимо «раскрасить» строки через одну, необходимо использовать следующие селекторы и свойства:

/* Для четных строк */
tr:nth-child(even){ background-color: #cde; }
/* Для нечетных строк */
tr:nth-child(odd){ background-color: #d3f5f4; }

1
2
3
4

/* Для четных строк */

trnth-child(even){background-color#cde; }

/* Для нечетных строк */

trnth-child(odd){background-color#d3f5f4; }

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

table { display: inline-table }

1	table{displayinline-table}

В этом случае таблицы ведут себя аналогично элементам с .

Естественно, вы можете вместо использовать свойство :

tr:nth-child(even) {
background-image: url(img/diagonal-noise.png);
}
tr:nth-child(odd) {
background-image: url(img/tetr.gif);
}

1
2
3
4
5
6

trnth-child(even){

background-imageurl(imgdiagonal-noise.png);

}

trnth-child(odd){

background-imageurl(imgtetr.gif);

}

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

table {
border: 2px solid #124480;
border-collapse: collapse;
<strong>width: 500px;</strong>
}
td:first-child{
text-align: right;
}
td:last-child{
width: 30%;
text-align: right;
}
td:last-child:after{
content: ‘ грн.’;
}

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

table{

border2pxsolid#124480;

border-collapsecollapse;

<strong>width500px;<strong>

}

tdfirst-child{

text-alignright;

}

tdlast-child{

width30%;

text-alignright;

}

tdlast-childafter{

content’ грн.’;

}

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

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

Как создать таблицу 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 код формата .

Examples

Example 1

For a challenging table style, look at the «Nutrition Facts»
table included with every cereal packet in the USA. I haven’t had time
to draw or scan one of these fully yet so reach for the cereals …

On familia muesli boxes, the legend «Cereal with 1/2 cup Vitamin A and
D Fortified Skim Milk» is typeset with the text running vertical up the
table. Most cereal packets give this horizontally though. This raises the
issue of being able to alter the text direction in the style sheet,
e.g. «run: up», «down» or «right».

The other notable feature is how «Dietary Fiber» and «Sugars» are
indented along with the horizontal rule above these two rows. This
could perhaps be achieved by «TR {padding-left: 3em}». One would then
have to draw the border above «Dietary Fiber» and above «Sugars»
on these cells, while setting the bottom border for «Total Carbohydrate»
to none. Its not obvious how to do this with the rules properties
because of the asymetry between «Total Carbohydrate» / «Dietary Fiber»
and «Protein» / «Sugars». This may motivate using border properties on
TR elements, though.

Example 2

<STYLE>
  table {border: thick outset; padding 3px}
  td {border: thin inset; margin: 3px}
</STYLE>

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

Example 3

<STYLE>
  table {border: thick outset; padding: 1px;
         rules: rows; rule-style: groove}
</STYLE>

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

Example 4

<STYLE>
  table {border: thick solid; padding none;
         rules: all thin solid}
</STYLE>

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

or perhaps as:

<STYLE>
  table {border: thick solid; padding: none}
  td {border: thin solid; margin: none}
</STYLE>

HTML Теги стиля

Тег	Описание
<style>	Определяет информацию о стиле для документа HTML
<link>	Определяет ссылку между документом и внешним ресурсом

Для получения полного списка всех доступных тегов HTML, посетите наш HTML Справочник тегов.

Вопросы для самоконтроля

Что такое стилизация веб-страниц?
Как расшифровывается CSS?
Для чего нужны каскадные таблицы стилей?
Как можно добавить CSS до HTML-элементов?
Какой атрибут использует встроенный CSS?
В каком разделе веб-страницы указывается внутренний CSS?
Как указывается внешняя таблица стилей в HTML-документе?
Какое расширение должно быть в файле внешней таблицы стилей?
Какое CSS-свойство определяет цвет текста?
Какое CSS-свойство определяет семейство шрифта?
Какое CSS-свойство определяет размер текста?
Какое CSS-свойство определяет границу вокруг HTML-элемента?
Какое CSS-свойство определяет внутренний отступ между текстом и границей HTML-элемента?
Какое CSS-свойство определяет внешний отступ вне границы HTML-элемента?
Какой атрибут используется для конкретного стиля определённого HTML-элемента?
С помощью какого символа в CSS указывается идентификатор (id) HTML-элемента?
Какой атрибут используется для определённых типов HTML-элементов?
С помощью какого символа в CSS указывается название класа HTML-элемента?
Какие есть способы ссылки на внешний файл стилей?

❮ Prev
Next ❯

Выравнивание текста в ячейках

По умолчанию текст в ячейке таблицы выравнивается по левому краю и по центру высоты. Исключением служит элемент <th>, он определяет ячейку заголовка, в котором выравнивание происходит по центру. Чтобы изменить способ выравнивания применяется стилевое свойство text-align (пример 8).

Пример 8. Выравнивание содержимого ячеек по горизонтали

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Таблица</title>
<style>
table {
border-collapse: collapse; /* Убираем двойные линии */
width: 100%; /* Ширина таблицы */
}
th {
background: #dfebb7; /* Цвет фона ячейки */
text-align: left; /* Выравнивание по левому краю */
}
td {
text-align: center; /* Выравнивание по центру */
}
th, td {
border: 1px solid black; /* Параметры рамки */
padding: 4px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<table>
<tr><th>Заголовок 1</th><td>Ячейка 1</td><td>Ячейка 2</td></tr>
<tr><th>Заголовок 2</th><td>Ячейка 3</td><td>Ячейка 4</td></tr>
</table>
</body>
</html>

В данном примере содержимое <th> выравнивается по левому краю, а содержимое <td> — по центру. Результат примера показан ниже (рис. 6).

Рис. 6. Выравнивание текста в ячейках

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Таблица</title>
<style>
th {
background: #496791; /* Цвет фона ячеек заголовка */
color: #fff; /* Цвет текста */
}
td {
background: #f5e8d0; /* Цвет фона ячеек */
text-align: center; /* Выравниваем по центру */
}
td, th {
padding: 5px 10px; /* Поля в ячейках */
vertical-align: top; /* Выравниваем по верхнему краю */
}
</style>
</head>
<body>
<table>
<tr>
<th rowspan=»2″>Вид соединения</th>
<th colspan=»2″>Поля допусков ширины шпоночного паза</th>
</tr>
<tr>
<th>Вал</th><th>Втулка</th>
</tr>
<tr>
<td>Свободное</td><td>H9</td><td>D10</td>
</tr>
<tr>
<td>Нормальное</td><td>N9</td><td>I<sub>s</sub>9</td>
</tr>
<tr>
<td>Плотное</td><td colspan=»2″>P9</td>
</tr>
</table>
</body>
</html>

В данном примере выравнивание текста происходит по верхнему краю. Результат примера показан на рис. 7.

Рис. 7. Выравнивание текста в ячейках

таблицы

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-punctuationheighthyphensimage-rendering@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmask-imagemask-modemask-originmask-positionmask-repeatmask-sizemax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderorphansoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-wrapoverflow-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-spacewidowswidthword-breakword-spacingword-wrapwriting-modez-index

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

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

th, td { padding: 7px; }

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

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

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

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