Стилизация таблиц (HTML + CSS)
Таблицы можно использовать не только как каркас страниц, различных меню и блоков, но и по прямому назначению — созданию таблиц. Но чтобы таблицы выглядели красиво и вписывались в наш дизайн их нужно немного обработать напильником. Таблица без стилей в вашем браузере выглядит вот так:
Код таблицы:
<table border="1" width="200px"> <tr><td> </td><td> </td></tr> <tr><td> </td><td> </td></tr> </table>
Такое оформление подходит не всегда. Допустим, нам необходима таблица с зелеными границами ячеек. Попробуем указать стиль border для таблицы и ее ячеек:
<style> #ourtable, #ourtable td {border: 1px solid #070} </style> <table border="1" width="200px" id="ourtable"> <tr><td> </td><td> </td></tr> <tr><td> </td><td> </td></tr> </table>
в результате таблица примет следующий вид:
Что ж, уже лучше. Но смущают двойные границы у ячеек. Дело в том, что каждая ячейка таблицы имеет свои границы, при чем по-умолчанию у таблицы задана величина зазора между ячеек с помощью атрибута cellspacing. Если явно задать значение этого атрибута:
<style> #ourtable, #ourtable td {border: 1px solid #070} </style> <table border="1" width="200px" id="ourtable" cellspacing="0"> <tr><td> </td><td> </td></tr> <tr><td> </td><td> </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> </td><td> </td></tr> <tr><td> </td><td> </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> </td><td> </td><td> </td><td> </td></tr> <tr><td> </td><td> </td><td> </td><td> </td></tr> <tr class="odd"><td> </td><td> </td><td> </td><td> </td></tr> <tr><td> </td><td> </td><td> </td><td> </td></tr> <tr class="odd"><td> </td><td> </td><td> </td><td> </td></tr> <tr><td> </td><td> </td><td> </td><td> </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:1 | 1:2 | 1:3 | 1:4 |
| 2:1 | 2:2 | 2:3 | 2:4 |
| 3:1 | 3:2 | 3:3 | 3:4 |
| 4:1 | 4:2 | 4:3 | 4:4 |
| 5:1 | 5:2 | 5:3 | 5:4 |
| 6:1 | 6:2 | 6:3 | 6: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:1 | 1:2 | 1:3 | 1:4 |
| 2:1 | 2:2 | 2:3 | 2:4 |
| 3:1 | 3:2 | 3:3 | 3:4 |
| 4:1 | 4:2 | 4:3 | 4:4 |
| 5:1 | 5:2 | 5:3 | 5:4 |
| 6:1 | 6:2 | 6:3 | 6:4 |
