HTML, XHTML и CSS на 100% - Игорь Квинт

Скачать книгу

align применяется ко всем элементам таблицы и определяет общее горизонтальное выравнивание:

      • <table align=left/right/center> – таблицы на странице по левому краю/правому краю/по центру;

      • <tr align=left/right/center> – элементов строки по левому краю/правому краю/по центру;

      • <th align=left/right/center> – заголовка таблицы по левому краю/правому краю/по центру (по умолчанию по центру);

      • <td align=left/right/center/char> – данных в ячейке по левому краю/ правому краю/по центру/по заданному символу (по умолчанию по левому краю).

      Атрибут valign также применяется ко всем элементам таблицы и определяет общее вертикальное выравнивание:

      • <table valign=bottom/middle/top> – элементов таблицы внизу/по центру/вверху (по умолчанию по центру);

      • <tr valign=bottom/middle/top> – элементов строки внизу/по центру/ вверху;

      • <th valign=bottom/middle/top> – заголовка таблицы внизу/по центру/ вверху;

      • <td valign=bottom/middle/top> – данных в ячейке внизу/по центру/ вверху.

      В листинге 3.6 приведен пример использования в различных комбинациях описанных выше атрибутов форматирования таблицы и содержимого ячеек (рис. 3.11).

Листинг 3.6. Пример использования выравнивания таблицы и содержимого ячеек

      <html>

      <head>

      <title>Простая HTML-таблица</title>

      </head>

      <body>

      <table border="4" bordercolor="#000000" cellspacing="0" cellpadding="0"width= "400" height="150" align=center>

      <caption>Наименование товара</caption>

      <tr><th>Товар </th><th>Код</th><th>Количество</th><th>Цена </th></tr>

      <tr valign=bottom align=center>

      <td>Клей</td><td>028</td><td>190 шт </td><td>12,2 руб</td></tr>

      <tr valign=bottom align=center>

      <td>Скотч</td><td>058</td><td>120 шт </td><td>4,6 руб </td></tr>

      <tr valign=bottom align=center>

      <td>Ластик</td><td>986</td><td>100 шт </td><td>2,3 руб </td></tr>

      </table>

      </body>

      </html>

      Рис. 3.11. Пример использования выравнивания таблицы и содержимого ячеек

      3.8. Объединение ячеек таблицы

      На практике встречается большое количество таблиц, в которых одна ячейка объединяет в себе несколько ячеек по высоте и ширине (см. рис. 3.2). В HTML ячейки объединяют с помощью атрибутов colspan и rowspan. Атрибут colspan определяет количество ячеек, на которые простирается данная ячейка по горизонтали, а rowspan – по вертикали.

      На рис. 3.12 изображена таблица с объединенными ячейками. Заголовок таблицы находится в ячейке, объединяющей все три ячейки строки. Таблица содержит еще две ячейки, каждая из которых объединяет две ячейки по вертикали. Код такой таблицы приведен в листинге 3.7.

      Рис. 3.12. Таблица с объединенными ячейками

Листинг 3.7. Пример использования атрибутов объединения ячеек

      <html>

      <head>

      <title>HTML-таблица</title>

      <head>

      <body>

      <table border="4" bordercolor="#000000" cellspacing="0" cellpadding="5" >

      <tr align=center><th colspan=3>Ячейка объединяет в себе все ячейки строки </th></tr>

      <tr align=center><td rowspan=2>Ячейка на две строки </td>

      <td>Ячейка 2х2</td><td>Ячейка 2х3</td></tr>

      <tr align=center><td>Ячейка 3х2</td><td>Ячейка 3х3</td></tr>

      <tr align=center><td rowspan=2>Ячейка на две строки</td>

      <td>Ячейка 4х2</td><td>Ячейка 4х3</td></tr>

      <tr align=center><td>Ячейка 5х2</td><td>Ячейка 5х3</td></tr>

      </table>

      </body>

      </html>

      3.9.

Скачать книгу