Самоучитель HTML Справочник HTML Глобальные атрибуты События Типы элементов Таблица цветов Спецсимволы HTML

HTML: Добавление рамки и заголовка к таблице

Рамка таблицы

Тег <table> может иметь необязательный атрибут border, управляющий границами таблицы. По умолчанию браузеры не отображают рамку вокруг таблицы и ячеек, но присутствие атрибута border, указывает браузеру, что у таблицы должна быть рамка.

По стандарту HTML5 значением атрибута border может быть либо 1, либо пустая строка (обозначается как пара двойных кавычек ""). Не важно, какое значение атрибута вы зададите, если он присутствует, то рамка будет отображаться:

<html>
  <body>

    <h4>Таблица с рамкой:</h4>
    <table border="1">
      <tr><td>Первая</td><td>строка</td></tr>
      <tr><td>Вторая</td><td>строка</td></tr>
    </table>
    <h4>Таблица без рамки:</h4>
    <table>
      <tr><td>Первая</td><td>строка</td></tr>
      <tr><td>Вторая</td><td>строка</td></tr>
    </table>

  </body>
</html>
Попробовать »

Если вам не нравится вид рамки у таблицы, заданный по умолчанию, т.е. двойные рамки, вы можете воспользоваться атрибутом style, прописав в нем CSS свойство border-collapse со значением collapse, это придаст рамке стандартный вид:

<html>
  <body>

    <table border="1" style="border-collapse: collapse;">
      <tr><td>ячейка 1</td><td>ячейка 2</td></tr>
      <tr><td>ячейка 3</td><td>ячейка 4</td></tr>
    </table>

  </body>
</html>
Попробовать »

Заголовок таблицы

У каждой таблицы обычно бывает заголовок, описывающий ее содержимое. Для создания заголовка таблицы используется тег <caption>, обычно он размещается сразу после открывающего тега <table>, но также он может располагаться практически в любом месте внутри таблицы между элементами <tr>.

Тег заголовка может содержать в себе любые элементы, которые можно использовать в теле HTML-документа. По умолчанию содержимое тега <caption> отображается над таблицей и выравнивается по ее центру. Расположение заголовка можно изменить применив к нему CSS свойство caption-side:

<html>
  <body>

    <table border="1">
      <caption>Моя первая таблица</caption>
      <tr><td>строка 1, ячейка 1</td><td>строка 1, ячейка 2</td></tr>
      <tr><td>строка 2, ячейка 1</td><td>строка 2, ячейка 2</td></tr>
    </table>

  </body>
</html>
Попробовать »
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011-2016 © puzzleweb.ru

Реклама на сайте | Обратная связь