Оформление таблиц CSS

Материал из Викижурнал
CSS - Оформление таблиц
CSS Оформление таблиц
CSS Оформление таблиц
Селектор: table; tr; th; #tablename
Свойство: 1) width; height; max-height; max-width; min-height; min-width;
2) background;
3) padding; margin;
4) border;
Значения: 1) px и %
2) red; grey; - цвет таблицы, ячеек её границ
3) px и %
4) px - толщина границ + цвет

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

Правки, комментарии к данной статье, а также по использованию CSS в целом оставляйте в специально созданной теме нашего форума.

Оформление границ таблицы CSS

У нас обычная таблица, которая имеет одну заглавную строку "<th>" и две обычные строки "<td>", два столбца - в HTML такая таблица имеет следующий код: 

<table>
<tr>
  <th colspan="2">Заголовок таблицы</th>
</tr>
  <tr>
    <td>Содержание ячейки 1</td>
    <td>Содержание ячейки 2</td>
  </tr>
   <tr>
    <td>Содержание ячейки 3</td>
    <td>Содержание ячейки 4</td>
  </tr>
</table>

Все границы таблицы оформляются посредством тэга "border", поэтому в CSS прописываем следующее: 

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

Где:

  • table - задаёт параметры к всей таблице
  • tr - обозначает ряд ячеек
  • th - обозначает свойства заглавной ячейки таблицы, текст в которой по умолчанию выровнен по центру и имеет жирный шрифт.
  • td - обозначает другие ячейки таблицы, текст в которых по умолчанию выровнен по левому краю и имеет обычный шрифт.
  • border - тэг для оформления границ.
  • 1px - задаёт параметры толщины линии в пикселях.
  • solid - задаёт параметры типа линий.
  • grey - параметр цвета, в данном случае серый. Можно задавать любые цвета.

Обратите внимание, что в данном примере у таблицы двойные границы, это связано с тем, что есть границы, как у самой таблицы ''<table>'' и у ячеек таблицы <th> и <td>. Чтобы этого избежать и сделать одиночную границу, следует использовать в CSS тэг "border-collapse", например: 

table {
border-collapse: collapse;
}

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

Другие настройки CSS для оформления таблиц

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

Настройка размеров таблицы CSS

table {
height: 200px;
width:50%;
}
  • height - высота таблицы, в данном случае задаётся в пикселях (200px)
  • width - ширина таблицы, в данном случае задаётся в процентах (50% от ширины экрана)

Настройка отступов в таблице CSS

К таблице можно задать отступы, как внешние, чтобы другие элементы страницы не "прилипали" к таблице, так и внутренние отступы, чтобы текст и другие элементы в таблице не сливались с границами таблицы: 

table, th, td {
padding: 4px;
margin: 6px;

Где:

  • padding - внутренние отступы таблицы и ячеек, задаются в пикселях (px)
  • margin - внешние отступы от таблицы, задаются в пикселях (px)

Стоит отметить, что можно присвоить имя определённой ячейке (<th id="cell_name">) и задать параметры отступов по отношению к ней.

Выравнивание текста в таблице CSS

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

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

Горизонтальное выравнивание в ячейках осуществляется при помощи тэга "text-align": 

th {
text-align: left;
}
  • Где "left" - выравнивание по левому краю ячейки, "right" - выравнивание по правому краю ячейки, "center" - выравнивание текста по центру ячейки.

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

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

td, td {
vertical-align: bottom;
height: 50px;
}
  • Где "bottom" - выравнивание по нижнему краю ячейки, "top" - выравнивание по верхнему краю ячеек таблицы, "middle" - вертикальное выравнивание по центру (установлено по умолчанию ко всей таблице).
  • В данном примере специально задана высота ячейкам "50px", чтобы наглядно было видно вертикальное выравнивание.

Настройка цвета таблицы CSS

table {
background: grey;
}

В этом случае вся таблица будет окрашена в серый цвет.
Цвет таблицы, как и других элементов на странице, задаётся тэгом "background", где цвет можно обозначить английскими словами "blue" - синий, "black" - чёрный, "red" - красный и т.д. Также возможно задать HTML кодом, например #F9FCBC. Фоном в таблице может служить какой либо рисунок или узор - об этом подробно можно узнать в статье Настройка фона CSS.

Для красивого оформления таблицы в HTML можно присваивать рядам ячеек определённое имя (<tr id="row1">): 

<table>
 <tr>
   <th colspan="2">Заголовок таблицы</th>
 </tr>
  <tr id="row">
    <td>Содержание ячейки 1</td>
    <td>Содержание ячейки 2</td>
  </tr>
   <tr>
    <td>Содержание ячейки 3</td>
    <td>Содержание ячейки 4</td>
  </tr>
   <tr id="row">
    <td>Содержание ячейки 5</td>
    <td>Содержание ячейки 6</td>
  </tr>
</table>

и присвоить этому имени свой цвет, таким образом в CSS прописываем: 

table, th, td {
border: 1px solid grey;
padding: 4px;
border-collapse: collapse;
}

th {
background: #CBCBCB;
text-decoration: underline;
}

#row {
background: #FFFFEE;
}

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

Потестировать код на отдельной странице.

Примечание

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

Статьи по теме CSS

Источник — https://ru.wikijournal.org/w-wiki/index.php?title=Оформление_таблиц_CSS&oldid=12678