HTML, XHTML и CSS на 100%. Игорь Квинт
Чтение книги онлайн.

Читать онлайн книгу HTML, XHTML и CSS на 100% - Игорь Квинт страница 26

Название: HTML, XHTML и CSS на 100%

Автор: Игорь Квинт

Издательство:

Жанр: Интернет

Серия:

isbn: 978-5-498-07594-5

isbn:

СКАЧАТЬ style="font-size:15px;">      Чтобы созданная ячейка являлась заголовком в таблице (текст выравнивается по центру и выделяется полужирным шрифтом), нужно воспользоваться парой тегов <TH> и </TH>. Встречаются случаи использования элемента TH без закрывающего тега. Элементы TH, TR и TD без закрывающих тегов корректно интерпретируются только в последней версии браузера Internet Explorer.

      Теперь вы можете создать простую HTML-таблицу. Рассмотрим пример таблицы, которая состоит из трех строк и трех столбцов, причем ячейки первой строки будут заголовками соответствующих столбцов (листинг 3.1). На рис. 3.4 показано, как данная таблица выглядит в окне браузера.

Листинг 3.1. Код простой HTML-таблицы, которая состоит из трех столбцов и трех строк

      <html>

      <head>

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

      </head>

      <body>

      <table>

      <caption>Это заголовок таблицы</caption>

      <tr><th>Заголовок 1</th><th>Заголовок 2</th><th>Заголовок 3</th></tr>

      <tr><td>Ячейка 2x1 </td><td>Ячейка 2x2 </td><td>Ячейка 2x3 </td></tr>

      <tr><td>Ячейка 3x1 </td><td>Ячейка 3x2 </td><td>Ячейка 3x3 </td></tr>

      </table>

      </body>

      </html>

      Рис. 3.4. Пример простой HTML-таблицы

      Совет

      Все браузеры игнорируют любые символы пробела и табуляции и перевод строки вне тегов HTML-документа, поэтому описывать таблицу можно так, чтобы она легко читалась. Я считаю, что использование предложенного варианта описания таблицы позволит вам не упустить ни одного тега HTML-документа.

      3.4. Граница таблицы

      В рассмотренном выше примере в таблице и ее ячейках отсутствовали границы. Граница таблицы создается с помощью атрибута border элемента TABLE. Ширина границы таблицы указывается в пикселах. Если атрибут border не указан, то таблица выводится без видимой рамки. Благодаря атрибуту bordercolor можно задать цвет границы таблицы, указав код цвета. Добавим к уже созданной таблице черную границу шириной четыре пиксела.

      Для этого изменим строку

      <table>

      на

      <table border="4" bordercolor="#000000">

      Граница таблицы (и другие элементы сайта) в окне каждого браузера отображается по-разному. На рис. 3.5 показано, как созданная таблица отображается в окне стандартного браузера Internet Explorer, а на рис. 3.6 эта же таблица изображена в браузере Opera. Опытные веб-программисты стараются просматривать созданную страницу под разными типами браузеров, чтобы все везде выглядело одинаково. У каждого браузера свои капризы, так что создать сайт, чтобы все выглядело одинаково в любом браузере, – задача непростая.

      Рис. 3.5. Отображение таблицы в окне Internet Explorer

      Рис. 3.6. Отображение таблицы в окне Opera

      Из рис. 3.5 видно, что между границами ячеек и внешней границей таблицы существует свободное пространство. Это пространство легко регулируется атрибутами cellspacing и cellpadding элемента TABLE. Атрибут cellspacing определяет расстояние между ячейками таблицы в пикселах, а атрибут cellpadding – между содержимым ячейки и ее границей.

СКАЧАТЬ