Какими стилями заменить атрибуты тега table

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

<table align="center" cellpadding="4" cellspacing="0">

или нечто подобное :)

Ниже приводится краткая справка по широко используемым стилям таблиц.

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

table {
 margin: auto;
}

или

table {
 margin: 0 auto;
}

Заменяет align="center"

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

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

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

Заменяет border="1"

Свёрнутые границы

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

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

Добавление заполнения ячеек

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

th, td {
    padding: 15px;
}

Заменяет cellpadding="15"

Добавление интервала между ячейками

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

table {
    border-spacing: 5px;
}

Если таблица имеет свернутые границы, border-spacing не имеет эффекта. Заменяет cellspacing="5"

Выравнивание заголовков и содержимого ячеек

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

th {
    text-align: left;
}

Для выравнивания содержимого ячеек примените подобный стиль к тегу td со значениями left, center или right. Заменяет указание атрибутов align у ячеек.

Для вертикального выравнивания содержимого ячейки таблицы применяйте свойство vertical-align со значениями baseline, top, middle или bottom. Это заменяет устаревший атрибут valign.

Добавление набора цветов и фонов для ячеек

Создавайте CSS-классы со свойствами color и background-color, а затем применяйте их к ячейкам, например:

<style>
.color1 {
 color: yellow;
 background-color: blue;
}
.color2 {
 color: #111111;
 background-color: #eeeeee;
}
</style>
<table>
 <tr>
  <td class="color1">Стиль 1</td>
  <td class="color2">Стиль 2</td>
 </tr>
</table>

Заменяет атрибут bgcolor и подобное.

Установка ширины и высоты ячеек

Добавляйте соответствующие стилевые классы ячеек с указанием свойств width и height, например:

<style>
td {
 border: 1px solid black;
 padding: 4px;
 text-align: center;
 vertical-align: middle;
}
.tab1 {
 width: 90%;
 margin: auto;
 border-collapse: collapse;
 height: 400px;
}
.cell1 {
 width: 250px;
}
.cell2 {
 width: 50%;
}
</style>
<table class="tab1">
 <tr>
  <td class="cell1">Столбец 1</td>
  <td class="cell2">Столбец 2</td>
  <td>Столбец 3</td>
 </tr>
</table>

Скрин этой таблицы в браузере, фрагмент окна

05.10.2019, 17:34 [1868 просмотров]