Основы работы с XHTML и CSS


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


Теперь необходимо добавить таблицу стилей, чтобы оформить таблицу. В примере, показанном на листинге 8.41, используются классы стилей для задания стиля заголовка, строки и итоговой строки. Класс .HEAD применяется для заголовков столбцов, задавая полужирный и выровненный по центру текст с фоновым цветом. Класс .ROW форматирует каждую строку данных, выравнивая текст вправо, а класс .LABEL переопределяет это оформление строки для первой ячейки в строке, выравнивая текстовые метки влево. Класс .TOTAL форматирует итоговую строку полужирным и выровненным вправо текстом с фоновым цветом.

<style type="text/css"> table {border:outset 1px} table td {border:inset 1px; padding:5px} table caption {font:bold 12pt} .HEAD {font-weight:bold; text-align:center; vertical-align:middle; background-color:#F0F0F0} .ROW {text-align:right} .LABEL {text-align:left} .TOTAL {text-align:right; font-weight:bold; background-color:#F0F0F0} </style>

<table> <caption>Quantity and Value of Installed Software</caption> <tr class="HEAD"> <td rowspan="2">Software</td> <td colspan="2">Department A</td> <td colspan="2">Department B</td> </tr> <tr class="HEAD"> <td>Copies</td> <td>$ Value</td> <td>Copies</td> <td>$ Value</td> </tr> <tr class="ROW"> <td class="LABEL">Word Processors</td> <td>10</td> <td>700.00</td> <td>15</td> <td>1,050.00</td> </tr> <tr class="ROW"> <td class="LABEL">Spreadsheets</td> <td>12</td> <td>780.00</td> <td>18</td> <td>1,170.00</td> </tr> <tr class="ROW"> <td class="LABEL">Databases</td> <td>7</td> <td>595.00</td> <td>9</td> <td>765.00</td> </tr> <tr class="TOTAL"> <td>Total Value</td> <td colspan="2">$ 2,075.00</td> <td colspan="2">$ 2,985.00</td> </tr> </table>

Листинг 8.41. Окончательный код для таблицы с присоединенной таблицей стилей

Что казалось сложным упражнением в кодировании, оказалось достаточно просто реализуемым при разделении структуры и оформления. Первое, систематически действуйте по строкам таблицы, кодируя все одиночные ячейки и кодируя ячейки, которые требуют расширения, игнорируя ячейки, которые были использованы предыдущим расширением. Затем взгляните на получившуюся таблицу, убедившись, что она структурирована правильно. Наконец, воспользуйтесь таблицей стилей, чтобы отформатировать строки или ячейки, которые требуют дополнительного оформления.




Начало  Назад  Вперед