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


Оформление без объединения столбцов в группы


Таблицу рассматриваемого примера можно оформить практически идентичным образом без использования разделов или объединения столбцов в группы. Один из способов показан в таблице и соответствующем коде, которые показаны далее.

Таблица, оформленная без объединения столбцов в группы

Рис. 8.49.  Таблица, оформленная без объединения столбцов в группы

Не используются никакие разделы таблицы <thead>, <tbody>, или <tfoot>. Также не используется объединение столбцов в группы. Вместо этого применяются классы стилей для отдельных строк и ячеек в теле таблицы. Эта таблица не задействует атрибуты rules или frame.

<style type="text/css"> table {border-collapse:collapse} table caption {font:bold 14pt; color:#707070} table td {padding:3px} .ADDR {text-align:left; background-color:#FFFFFF} .HEAD {font-weight:bold; text-align:center; background-color:#A0A0A0; color:#FFFFFF; border:solid 1px} .NO {width:10%; text-align:center; background-color:#F0F0F0} .DESC {text-align:left; background-color:#FFFFFF; border-right:solid 1px; border-left:solid 1px} .QTY {width:15%; text-align:center; background-color:#FFFFFF; border-right:solid 1px} .PRICE {width:15%; text-align:right; background-color:#FFFFFF; border-right:solid 1px} .AMOUNT {width:15%; text-align:right; background-color:#F0F0F0} .SUB {text-align:right; background-color:#F0F0F0} .TOTAL {font-weight:bold; background-color:#A0A0A0; color:#FFFFFF} </style>

<table> <caption>Sales Order</caption>

<tr class="ADDR"> <td colspan="5"> Your Name<br/> Your Address<br/> City, ST 55555<br/> </td> </tr> <tr class="HEAD"> <td>No.</th> <td>Description</td> <td>Quantity</td> <td>Price</td> <td>Amount</td> </tr>

<tr> <td class="NO">11111</td> <td class="DESC">Microsoft Windows XP Professional</td> <td class="QTY">2</td> <td class="PRICE">169.99</td> <td class="AMOUNT">339.98</td> </tr> <tr> <td class="NO">22222</td> <td class="DESC">Microsoft Office XP Professional</td> <td class="QTY">2</td> <td class="PRICE">449.99</td> <td class="AMOUNT">999.98</td> </tr> <tr> <td class="NO">33333</td> <td class="DESC">Adobe Photoshop 7.0</td> <td class="QTY">1</td> <td class="PRICE">579.95</td> <td class="AMOUNT">579.95</td> </tr> <tr> <td class="NO">44444</td> <td class="DESC">HP PhotoSmart 7550 Printer</td> <td class="QTY">1</td> <td class="PRICE">299.99</td> <td class="AMOUNT">299.99</td> </tr> <tr> <td class="NO">55555</td> <td class="DESC">USB Device Cable</td> <td class="QTY">1</td> <td class="PRICE">5.49</td> <td class="AMOUNT">5.49</td> </tr>




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