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

       

Год 2000 2001 2002 2003


<pre> Таблица 1 Продажи по регионам ---------------------------------------------- Регион/ Год 2000 2001 2002 2003 ---------------------------------------------- Восток 35.2 37.4 39.8 40.0 Запад 28.0 25.6 27.4 29.8 Юг 102.3 86.1 98.6 100.2 Север 10.5 8.6 9.8 10.4 ---------------------------------------------- </pre>
Листинг 8.1. Код для создания таблицы с помощью тега <pre>
Закрыть окно


<table> <tr> <td>содержимое ячейки</td> <td>содержимое ячейки</td> ... </tr> ... </table>
Листинг 8.2. Общий формат основных тегов таблицы
Закрыть окно


<table> <tr> <td>Cell 1.1</td> <td>Cell 1.2</td> <td>Cell 1.3</td> </tr> <tr> <td>Cell 2.1</td> <td>Cell 2.2</td> <td>Cell 2.3</td> </tr> <tr> <td>Cell 3.1</td> <td>Cell 3.2</td> <td>Cell 3.3</td> </tr> </table>
Листинг 8.3. Код для создания таблицы 3 x 3
Закрыть окно


<table> <tr><td>Cell 1.1</td><td>Cell 1.2</td><td>Cell 1.3</td></tr> <tr><td>Cell 2.1</td><td>Cell 2.2</td><td>Cell 2.3</td></tr> <tr><td>Cell 3.1</td><td>Cell 3.2</td><td>Cell 3.3</td></tr> </table>
Листинг 8.4. Альтернативный код создания таблицы 3 x 3
Закрыть окно


Cell 1. 1 Cell 1.2 Cell 1.3 Cell 2.1 Cell 2.2 Cell 2.3 Cell 3.1 Cell 3.2 Cell 3.3
Листинг 8.5. Стандартная таблица 3 x 3
Закрыть окно




<style type="text/css"> table {border: outset 1px} td {border:inset 1px} </style>

<table> <tr> <td>Cell 1.1</td> <td>Cell 1.2</td> <td>Cell 1.3</td> </tr> <tr> <td>Cell 2.1</td> <td>Cell 2.2</td> <td>Cell 2.3</td> </tr> <tr> <td>Cell 3.1</td> <td>Cell 3.2</td> <td>Cell 3.3</td> </tr> </table>
Листинг 8.6. Код создания таблицы 3 x 3 с границами
Закрыть окно


<style type="text/css"> table {border: outset 1px} td {border:inset 1px} </style>

<table> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>

<table> <tr> <td>Cell A</td> <td>Cell B></td> </tr> <tr> <td>Cell C</td> <td>Cell D</td> </tr> </table>

</td> </tr> </table>
Листинг 8.7. Код, создающий вложенную таблицу
Закрыть окно


<style type="text/css"> table#Table1 {border:outset 1px} table#Table1 td {border:inset 1px}

table#Table2 {border:outset 3px} table#Table2 td {border:outset 2px} </style>

<table id="Table1"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table>

<table id="Table2"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table>
Листинг 8.8. Код оформления нескольких таблиц на одной странице
Закрыть окно


<style type="text/css"> table {border:style 5px} td {border:inset 1px} </style>
Листинг 8.9. Общий код таблицы стилей для границ таблицы
Закрыть окно


<style type="text/css"> table {border-top:outset 5px; border-bottom:outset 5px} td {border:inset 1px} </style>
Листинг 8.10. Таблица стилей для верхней и нижней границ таблицы
Закрыть окно


<style type="text/css"> table {border:solid 1px} td {border:style 3px} </style>
Листинг 8.11. Общий код таблицы стилей для границ ячеек
Закрыть окно


<style type="text/css"> table {border:outset 5px; border-collapse:collapse} td {border-top:solid 2px; border-bottom:solid 2px} </style>

<style type="text/css"> table {border:outset 5px; border-collapse:collapse} td {border-left:solid 2px; border-right:solid 2px} </style>
Листинг 8.12. Таблицы стилей для задания границ строк и столбцов
Закрыть окно


<style type="text/css"> table#TAB1 {border:outset 3px} table#TAB1 td {border:inset 1px} table#TAB1 tr#ROW3 td {border:outset 3px} </style>

<table id="TAB1"> <tr> <td>Cell 1.1<</td> <td>Cell 1.2<</td> <td>Cell 1.3</td> </tr> <tr> <td>Cell 2.1</td> <td>Cell 2.2</td> <td>Cell 2.3</td> </tr> <tr id="ROW3"> <td>Cell 3.1</td> <td>Cell 3.2</td> <td>Cell 3.3</td> </tr> </table>
Листинг 8.13. Код выделения строки таблицы с помощью границ ячеек
Закрыть окно


<style type="text/css"> table {border: outset 3px} table td {border:inset 1px} table caption {font:bold 10pt arial} </style>

<table> <caption>This is My Table</caption> <tr> <td>Cell 1.1</td> <td>Cell 1.2</td> <td>Cell 1.3</td> </tr> <tr> <td>Cell 2.1</td> <td>Cell 2.2</td> <td>Cell 2.3</td> </tr> <tr> <td>Cell 3.1</td> <td>Cell 3.2</td> <td>Cell 3.3</td> </tr> </table>
Листинг 8.14. Код таблицы с заголовком
Закрыть окно


<style type="text/css"> table {border:outset 3px; border-collapse:collapse} table td, th {border:inset 1px} table caption {font:bold 10pt arial} </style>

<table> <caption>This is My Table</caption> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr> <td>Cell 1.1</td> <td>Cell 1.2</td> <td>Cell 1.3</td> </tr> <tr> <td>Cell 2.1</td> <td>Cell 2.2</td> <td>Cell 2.3</td> </tr> <tr> <td>Cell 3.1</td> <td>Cell 3.2</td> <td>Cell 3.3</td> </tr> </table>
Листинг 8.15. Код для создания заголовков столбцов таблицы
Закрыть окно


<style type="text/css"> table {border:outset 3px; border-collapse:collapse} table tr#HEAD {font:bold; text-align:center} table td {border:inset 1px} table caption {font:bold 10pt arial} </style>

<table> <caption>This is My Table</caption> <tr id="HEAD"> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> <tr> <td>Cell 1.1</td> <td>Cell 1.2</td> <td>Cell 1.3</td> </tr> <tr> <td>Cell 2.1</td> <td>Cell 2.2</td> <td>Cell 2.3</td> </tr> <tr> <td>Cell 3.1</td> <td>Cell 3.2</td> <td>Cell 3.3</td> </tr> </table>
Листинг 8.16. Код для создания заголовков столбцов с помощью оформления строки
Закрыть окно


<style type="text/css"> table {border:style 5px red} td {border:inset 1px} </style>
Листинг 8.17. Общая таблица стилей для задания цвета границы таблицы
Закрыть окно


<style type="text/css"> <!-- Inset Style --> table {border:solid 7px; border-top-color:#FEB9B9; border-right-color:#B22222; border-bottom-color:#B22222; border-left-color:#FEB9B9} table td {border:inset 1px} </style>

<style type="text/css"> <!-- Outset Style --> table {border:solid 7px; border-top-color:#B22222; border-right-color:#FEB9B9; border-bottom-color:#FEB9B9; border-left-color:#B22222} table td {border:inset 1px} </style>
Листинг 8.18. Код таблицы стилей для таблиц с индивидуальными цветами границы
Закрыть окно


<style type="text/css"> table {border:solid 1px} td {border:style 3px rgb(255,0,0)} </style>
Листинг 8.19. Общая таблица стилей для цветов границ ячеек таблицы
Закрыть окно


<style type="text/css"> <!-- Inset Style --> table {border:solid 1px} table td {border:solid 5px; border-top-color:#FEB9B9; border-right-color:#B22222; border-bottom-color:#B22222; border-left-color:#FEB9B9} </style>

<style type="text/css"> <!-- Outset Style --> table {border:solid 1px} table td {border:solid 5px; border-top-color:#B22222; border-right-color:#FEB9B9; border-bottom-color:#FEB9B9; border-left-color:#B22222} </style>
Листинг 8.20. Код таблицы стилей для таблиц с индивидуальными цветами границ ячеек
Закрыть окно


<style type="text/css"> table {border:ridge 5px; background-color:#F6F6F6} table td {border:inset 1px} </style>
Листинг 8.21. Код для таблицы с заданным цветом фона
Закрыть окно


<style type="text/css"> table {border:ridge 5px} table td {border:inset 1px} table tr#ROW1 {background-color:red; color:white} table tr#ROW2 {background-color:white} table tr#ROW3 {background-color:blue; color:white} table td#CELL9 {border:inset 4px; background-color:navy} </style>

<table> <tr id="ROW1"> <td>Cell 1.1</td> <td>Cell 1.2</td> <td>Cell 1.3</td> </tr> <tr id="ROW2"> <td>Cell 2.1</td> <td>Cell 2.2</td> <td>Cell 2.3</td> </tr> <tr id="ROW3"> <td>Cell 3.1</td> <td>Cell 3.2</td> <td id="CELL9">Cell 3.3</td> </tr> </table>
Листинг 8.22. Код таблицы со строками различного цвета
Закрыть окно


<style type="text/css"> table {border:ridge 5px; background-image:url(bkgnd.jpg)} table td {border:inset 1px} </style>
Листинг 8.23. Код для таблицы с фоновым изображением
Закрыть окно


<style type="text/css"> table {border:outset 1; width:50%; height:100px} table td {border:inset 1} </style>
Листинг 8.24. Код таблицы с заданной шириной и высотой
Закрыть окно


<style type="text/css"> table {border:outset 1; width:50%} table td {border: inset 1} table tr#HEAD {font-weight:bold; text-align:center; background-color:#F0F0F0} table td#CELL1 {width:25%} table td#CELL2 {width:50%} table td#CELL3 {width:25%} </style>

<table> <tr id="HEAD"> <td id="CELL1">Column 1</td> <td id="CELL2">Column 2</td> <td id="CELL3">Column 3</td> </tr> <tr> <td>Cell 1.1</td> <td>Cell 1.2</td> <td>Cell 1.3</td> </tr> <tr> <td>Cell 2.1</td> <td>Cell 2.2</td> <td>Cell 2.3</td> </tr> <tr> <td>Cell 3.1</td> <td>Cell 3.2</td> <td>Cell 3.3</td> </tr> </table>
Листинг 8.25. Код таблицы с заданной шириной столбцов
Закрыть окно


<style type="text/css"> table {border:outset 1; float:right; margin-left:20px; margin-bottom:10px} ... </style>
Листинг 8.26. Частичная таблица стилей для плавающей таблицы
Закрыть окно


<style type="text/css"> p#CENTER {text-align:center} table {border:outset 1} table td {border:inset 1} table caption {font-weight:bold} table tr#HEAD {font-weight:bold; text-align:center; background-color:#F0F0F0} </style>

<p id="CENTER"> <table> <caption>A Centered Table</caption> ... </table> </p>
Листинг 8.27. Таблица стилей для выровненной по центру таблицы
Закрыть окно


<style type="text/css"> table {border:outset 1} table td {border:inset 1; padding:5px} </style>
Листинг 8.28. Таблица стилей для задания отступов в ячейках таблицы
Закрыть окно


<style type="text/css"> table {border:outset 1} table td {border:inset 3; padding:5px} </style>

<table cellspacing="10"> ... </table>
Листинг 8.29. Атрибут cellspacing для задания интервала между ячейками таблицы
Закрыть окно


<style type="text/css"> table {border:outset 1; width:250px; height:150px} table td {border:inset 1} table tr#ROW1 {vertical-align:top} table tr#ROW2 {vertical-align:middle} table tr#ROW3 {vertical-align:bottom} </style>

<table> <tr id="ROW1"> <td>Cell 1.1</td> <td>Cell 1.2</td> <td>Cell 1.3</td> </tr> <tr id="ROW2"> <td>Cell 2.1</td> <td>Cell 2.2</td> <td>Cell 2.3</td> </tr> <tr id="ROW3"> <td>Cell 3.1</td> <td>Cell 3.2</td> <td>Cell 3.3</td> </tr> </table>
Листинг 8.30. Таблица стилей для задания вертикального выравнивания текста в ячейках
Закрыть окно


<style type="text/css"> table {border:outset 1; width:250px; height:150px} table td {border:inset 1} table tr#ROW1 {vertical-align:top; text-align:left} table tr#ROW2 {vertical-align:middle; text-align:center} table tr#ROW3 {vertical-align:bottom; text-align:right} </style>
Листинг 8.31. Таблица стилей для горизонтального выравнивания текста в ячейках таблицы
Закрыть окно


<table> <tr> <td> </td> <td>Cell 1.2</td> <td>Cell 1.3</td> </tr> <tr> <td>Cell 2.1</td> <td> </td> <td>Cell 2.3</td> </tr> <tr> <td>Cell 3.1</td> <td>Cell 3.2</td> <td> </td> </tr> </table>
Листинг 8.32. Использование символов неразрывного пробела для вывода границ вокруг пустых ячеек
Закрыть окно


<style type="text/css"> table {border:0; width:230px} table td {border:inset 1; padding:3px} table tr#C-HEAD {font-weight:bold; background-color:#F0F0F0; text-align:center} table td#R-HEAD1 {font-weight:bold; background-color:#F0F0F0; text-align:left} table td#R-HEAD2 {font-weight:bold; background-color:#F0F0F0; text-align:left} table td#BLANK {background-color:#FFFFFF} .NOWRAP {white-space:nowrap} </style>

<table> <tr id="C-HEAD"> <td id="BLANK"> class="NOWRAP"</td> <td class="NOWRAP">Table Column 1</td> <td class="NOWRAP">Table Column 2</td> <td class="NOWRAP">Table Column 3</td> </tr> <tr> <td id="R-HEAD1" class="NOWRAP">Table Row 1</td> <td>Cell 1.1</td> <td>Cell 1.2</td> <td>Cell 1.3</td> </tr> <tr> <td id="R-HEAD2" class="NOWRAP">Table Row 2</td> <td>Cell 2.1</td> <td>Cell 2.2</td> <td>Cell 2.3</td> </tr> </table>
Листинг 8.33. Использование отключения переноса в ячейках таблицы
Закрыть окно


<style type="text/css"> table {border: outset 1px} table td {border:inset 1px; padding:3px} table tr#HEAD {font-weight:bold; text-align:center; background-color:#F0F0F0} </style>

<table> <tr id="HEAD"> <td colspan="2">Heading 1</td> <td colspan="2">Heading 2</td> </tr> <tr> <td>Cell 2.1</td> <td>Cell 2.2</td> <td>Cell 2.3</td> <td>Cell 2.4</td> </tr> <tr> <td>Cell 3.1</td> <td>Cell 3.2</td> <td>Cell 3.3</td> <td>Cell 3.4</td> </tr> </table>
Листинг 8.34. Код для объединения ячеек таблицы
Закрыть окно


<style type="text/css"> table {border: outset 1px} table td {border:inset 1px; padding:3px} table td#HEAD {font-weight:bold; text-align:center; background-color:#F0F0F0} </style>

<table> <tr> <td id="HEAD" rowspan="2">Heading</td> <td>Cell 1.2</td> <td>Cell 1.3</td> <td>Cell 1.4</td> </tr> <tr> <td>Cell 2.2</td> <td>Cell 2.3</td> <td>Cell 2.4</td> </tr> </table>
Листинг 8.35. Код для объединения строк таблицы
Закрыть окно


<style type="text/css"> table {border: outset 1px} table td {border:inset 1px; padding:3px} </style>

<table> <tr> <td colspan="2">Cell 1.1</td> [<td>Cell 1.2</td>] <td>Cell 1.3</td> <td rowspan="2">Cell 1.4</td> </tr> <tr> <td>Cell 2.1</td> <td rowspan="2">Cell 2.2</td> <td>Cell 2.3</td> [<td>Cell 2.4</td>] </tr> <tr> <td>Cell 3.1</td> [<td>Cell 3.2</td>] <td colspan="2">Cell 3.3</td> [<td>Cell 3.4</td>] </tr> </table>
Листинг 8.36. Код для объединения строк и столбцов таблицы
Закрыть окно


<table> <caption> Quantity and Value of Installed Software</caption> <tr> <td rowspan="2">Software</td> <td colspan="2">Department A</td> <td colspan="2">Department B</td> </tr>
Листинг 8.37. Код для объединения заголовков столбцов
Закрыть окно


<tr> <td>Copies</td> <td>$ Value</td> <td>Copies</td> <td>$ Value</td> </tr>
Листинг 8.38. Код второй строки таблицы
Закрыть окно


<tr> <td>Word Processors</td> <td>10</td> <td>700.00</td> <td>15</td> <td>1,050.00</td> </tr> <tr> <td>Word Processors</td> <td>12</td> <td>780.00</td> <td>18</td> <td>1,170.00</td> </tr> <tr> <td>Word Processors</td> <td>7</td> <td>595.00</td> <td>9</td> <td>765.00</td> </tr>
Листинг 8.39. Код с третьей по пятую строку таблицы
Закрыть окно


<tr> <td>Total Value</td> <td colspan="2">$ 2,075.00</td> <td colspan="2">$ 2,985.00</td> </tr> </table>
Листинг 8.40. Код последней строки таблицы
Закрыть окно


<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. Окончательный код для таблицы с присоединенной таблицей стилей
Закрыть окно


<table>

<caption>Sales Order</caption>

<thead> Код XHTML заголовка таблицы </thead>

<tfoot> Код XHTML нижней части таблицы </tfoot>

<tbody> Код XHTML тела таблицы </tbody>

</table>
Листинг 8.42. Схема кода заголовка, тела и нижней части таблицы
Закрыть окно


<thead> <tr> <td colspan="5"> Your Name<br/> Your Address<br/> City, ST 55555<br/> </td> </tr> <tr> <td>No.</td> <td>Description</td> <td>Quantity</td> <td>Price</td> <td>Amount</td> </tr> </thead>
Листинг 8.43. Код раздела <thead> таблицы
Закрыть окно


<tfoot> <tr> <td colspan="4">Shipping</td> <td>50.00</td> </tr> <tr> <td colspan="4">Sales Tax</td> <td>155.77</td> </tr> <tr> <td colspan="4">Total</td> <td>$ 2,431.16</td> </tr> </tfoot>
Листинг 8.44. Код раздела <tfoot> таблицы
Закрыть окно


<tbody> <tr> <td>11111</td> <td> Microsoft Windows XP Professional</td> <td>2</td> <td>169.99</td> <td>339.98</td> </tr> <tr> <td>22222</td> <td>Microsoft Office XP Professional</td> <td>2</td> <td>449.99</td> <td>999.98</td> </tr> <tr> <td>33333</td> <td>Adobe Photoshop 7.0</td> <td>1</td> <td>579.95</td> <td>579.95</td> </tr> <tr> <td>44444</td> <td>HP PhotoSmart 7550 Printer</td> <td>1</td> <td>299.99</td> <td>299.99</td> </tr> <tr> <td>55555</td> <td>USB Device Cable</td> <td>1</td> <td>5.49</td> <td>5.49</td> </tr> </tbody>
Листинг 8.45. Код раздела <tbody> таблицы
Закрыть окно


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

<colgroup id="GROUP1"> <col/> </colgroup>

<colgroup> <col/> </colgroup>

<colgroup id="GROUP3"> <col id="COL3"/> <col/> <col id="COL5"/> </colgroup>

...
Листинг 8.46. Код для объединения столбцов таблицы примера в группы
Закрыть окно


<style type="text/css"> table {border:outset 1px; border-collapse:collapse} table caption {font:bold 14pt; color:#707070} table td {border:inset 1px; padding:3px}

table colgroup#GROUP1 {width:10%; text-align:center; background-color:#F6F6F6} table colgroup#GROUP3 {width:15%; text-align:right} </style>
Листинг 8.47. Записи таблицы стилей для основных групп столбцов таблицы примера
Закрыть окно


<style type="text/css"> table {border:outset 1px; border-collapse:collapse} table caption {font:bold 14pt; color:#707070} table td {border:inset 1px; padding:3px}

table colgroup#GROUP1 {width:10%; text-align:center; background-color:#F6F6F6} table colgroup#GROUP3 {width:15%; text-align:right}

table colgroup#GROUP3 col#COL3 {text-align:center} table colgroup#GROUP3 col#COL5 {background-color:#F0F0F0} </style>
Листинг 8.48. Дополнительные записи таблицы стилей для указанных столбцов примера таблицы
Закрыть окно


<style type="text/css"> table {border:outset 1px; border-collapse:collapse} table caption {font:bold 14pt; color:#707070} table td {border:inset 1px; padding:3px}

table colgroup#GROUP1 {width:10%; text-align:center; background-color:#F6F6F6} table colgroup#GROUP3 {width:15%; text-align:right}

table colgroup#GROUP3 col#COL3 {text-align:center} table colgroup#GROUP3 col#COL5 {background-color:#F0F0F0}

table tr#ADDR td {text-align:left; background-color:#FFFFFF} table tr#HEAD td {font-weight:bold; text-align:center; background-color:#A0A0A0; color:#FFFFFF} </style>
Листинг 8.49. Дополнительные записи таблицы стилей для оформления <thead> примера таблицы
Закрыть окно


<style type="text/css"> table {border:outset 1px; border-collapse:collapse} table caption {font:bold 14pt; color:#707070} table td {border:inset 1px; padding:3px}

table colgroup#GROUP1 {width:10%; text-align:center; background-color:#F6F6F6} table colgroup#GROUP3 {width:15%; text-align:right}

table colgroup#GROUP3 col#COL3 {text-align:center} table colgroup#GROUP3 col#COL5 {background-color:#F0F0F0}

table tr#ADDR td {text-align:left; background-color:#FFFFFF} table tr#HEAD td {font-weight:bold; text-align:center; background-color:#A0A0A0; color:#FFFFFF}

table tfoot td {text-align:right} table tfoot tr#TOTAL {font-weight:bold; background-color:#A0A0A0; color:#FFFFFF} </style>
Листинг 8.50. Дополнительные записи таблицы стилей для оформления раздела <tfoot> примера таблицы
Закрыть окно


<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. Код оформления таблицы без использования групп столбцов
Закрыть окно


<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head> <title>Page Layout</title>

<style type="text/css"> body {margin:0px} table {border:outset 1; width:100%; height:100%} table td {border:inset 1; vertical-align:top} table td#HEAD {height:50px} table td#MENU {width:150px} </style>

</head> <body>

<table>

<tr> <td id="HEAD" colspan="2"> Header

</td> </tr>

<tr> <td id="MENU"> Menu

</td>

<td id="CONTENT"> Content

</td> </tr>

</table>

</body> </html>
Листинг 8.52. Код создания базовой компоновки страницы
Закрыть окно


<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head> <title>Page Template</title>

<style type="text/css"> body {margin:0px} table {width:770px; height:100%} table td {vertical-align:top; padding:5px} table td#HEAD {height:50px; background-color:#707070; color:#FFFFFF; font-size:24pt; font-weight:bold; vertical-align:middle} table td#MENU {width:150px; background-color:#F0F0F0} </style>

</head> <body>

<table>

<tr> <td id="HEAD" colspan="2"> My Web Site </td> </tr>

<tr> <td id="MENU"> <b>Menu</b><br/><br/> <a href="#">Home Page</a><br/><br/> <a href="#">First Page</a><br/> <a href="#">Second Page</a><br/> <a href="#">Third Page</a><br/> <a href="#">Fourth Page</a><br/> <a href="#">Fifth Page</a><br/> </td>

<td id="CONTENT">

- Поместите здесь содержимое страницы -

</td> </tr>

</table>

</body> </html>
Листинг 8.53. Код шаблона страницы Web
Закрыть окно


<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head> <title>Newsletter Layout</title>

<style type="text/css"> table {border:outset 1; width:100%; height:150px} table tr {vertical-align:top} table td {border:inset 1} table td#HEAD {text-align:center; vertical-align:middle} table td#COL1 {width:33%} table td#COL2 {width:34%} table td#COL3 {width:33%} </style>

</head> <body>

<table>

<tr> <td id="HEAD" colspan="3"> Header </td> </tr>

<tr> <td id="COL1" rowspan="2"> Column 1

</td> <td id="COL2"> Column 2

</td> <td id="COL3"> Column 3

</td> </tr>

<tr> <td id="ROW" colspan="2"> Bottom Row

</td> </tr>

</table>

</body> </html>
Листинг 8.54. Код структурного формата информационного бюллетеня
Закрыть окно

Содержание раздела