Стилизация таблиц (HTML + CSS)

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

  
  

Код таблицы:

<table border="1" width="200px">
  <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
</table>

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

<style>
  #ourtable, #ourtable td {border: 1px solid #070}
</style>
<table border="1" width="200px" id="ourtable">
  <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
</table>

в результате таблица примет следующий вид:

  
  

Что ж, уже лучше. Но смущают двойные границы у ячеек. Дело в том, что каждая ячейка таблицы имеет свои границы, при чем по-умолчанию у таблицы задана величина зазора между ячеек с помощью атрибута cellspacing. Если явно задать значение этого атрибута:

<style>
  #ourtable, #ourtable td {border: 1px solid #070}
</style>
<table border="1" width="200px" id="ourtable" cellspacing="0">
  <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
</table>

то зазоры между ячейками пропадут:

  
  

но границы ячеек станут толще в два раза, так как зазор между ячейками мы убрали и границы примкнули друг к другу. Поэтому для устранения зазоров между ячейками и двойных границ лучше воспользоваться стилем border-collapse для таблицы. По-умолчанию значение этого стиля равно separate, что означает, что у каждой ячейки свои собственные границы. Значение collapse указывает браузеру объединить границы соседних ячеек, что нам и нужно:

<style>
  #ourtable {border-collapse: collapse}
  #ourtable, #ourtable td {border: 1px solid #070}
</style>
<table border="1" width="200px" id="ourtable">
  <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
</table>
  
  

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

<style>
  #ourtable {border-collapse: collapse; background: #cfc}
  #ourtable, #ourtable td {border: 1px solid #070}
  #ourtable tr.odd {background: #beb}
</style>
<table border="1" width="60%" id="ourtable">
  <tr class="odd"><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr class="odd"><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr class="odd"><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
</table>
    
    
    
    
    
    

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

<style>
  * {font-family: tahoma; font-size: 12px}
  #ourtable {border-collapse: collapse; background: #cfc}
  #ourtable, #ourtable td {border: 1px solid #070}
  #ourtable td {padding: 2px 5px}
  #ourtable tr.odd {background: #beb}
</style>
<table border="1" width="60%" id="ourtable">
  <tr class="odd"><td>1:1</td><td>1:2</td><td>1:3</td><td>1:4</td></tr>
  <tr><td>2:1</td><td>2:2</td><td>2:3</td><td>2:4</td></tr>
  <tr class="odd"><td>3:1</td><td>3:2</td><td>3:3</td><td>3:4</td></tr>
  <tr><td>4:1</td><td>4:2</td><td>4:3</td><td>4:4</td></tr>
  <tr class="odd"><td>5:1</td><td>5:2</td><td>5:3</td><td>5:4</td></tr>
  <tr><td>6:1</td><td>6:2</td><td>6:3</td><td>6:4</td></tr>
</table>
1:11:21:31:4
2:12:22:32:4
3:13:23:33:4
4:14:24:34:4
5:15:25:35:4
6:16:26:36:4

И напоследок создадим выделяющуюся шапку таблицы. Для этого выберим более темный цвет фона, белый цвет текста и выравнивание текста по центру:

<style>
  * {font-family: tahoma; font-size: 12px}
  #ourtable {border-collapse: collapse; background: #cfc}
  #ourtable, #ourtable td {border: 1px solid #070}
  #ourtable td {padding: 2px 5px}
  #ourtable tr.odd {background: #beb}
  #ourtable tr.top td {background: #070; color: white; text-align: center}
</style>
<table border="1" width="60%" id="ourtable">
  <tr class="top"><td>Столбец 1</td><td>Столбец 2</td><td>Столбец 3</td><td>Столбец 4</td></tr>
  <tr class="odd"><td>1:1</td><td>1:2</td><td>1:3</td><td>1:4</td></tr>
  <tr><td>2:1</td><td>2:2</td><td>2:3</td><td>2:4</td></tr>
  <tr class="odd"><td>3:1</td><td>3:2</td><td>3:3</td><td>3:4</td></tr>
  <tr><td>4:1</td><td>4:2</td><td>4:3</td><td>4:4</td></tr>
  <tr class="odd"><td>5:1</td><td>5:2</td><td>5:3</td><td>5:4</td></tr>
  <tr><td>6:1</td><td>6:2</td><td>6:3</td><td>6:4</td></tr>
</table>
Столбец 1Столбец 2Столбец 3Столбец 4
1:11:21:31:4
2:12:22:32:4
3:13:23:33:4
4:14:24:34:4
5:15:25:35:4
6:16:26:36:4

Оставить комментарий

Ваше имя
 
Ваш e-mail
 
Комментарий