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


Example.8.51


<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>

<tr class="SUB"> <td colspan="4">Shipping</td> <td>50.00</td> </tr> <tr class="SUB"> <td colspan="4">Sales Tax</td> <td>155.77</td> </tr> <tr class="TOTAL"> <td colspan="4">Total</td> <td>$ 2,431.16</td> </tr> </table>

Листинг 8.51. Код оформления таблицы без использования групп столбцов

Закрыть окно




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



Книжный магазин