Границы таблицы html – Горизонтальные и вертикальные рамки — Знакомство с таблицами — HTML Academy

Таблицы HTML уроки для начинающих академия


Пример таблицы HTML

Компании Контакты Страны
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy

Определение таблицы HTML

Таблица HTML определяется тегом <table>.

Каждая строка таблицы определяется тегом <tr>. Заголовок таблицы определяется с помощью тега <th>. По умолчанию заголовки таблиц являются полужирными и центрированными. Табличные данные/ячейки определяются с помощью <td> тега.

Пример

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>

  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Примечание: Элементы <td> являются контейнерами данных таблицы.
Они могут содержать все виды HTML-элементов; текст, изображения, списки, другие таблицы, etc.



Таблица HTML-Добавление границы

Если граница для таблицы не указана, она будет отображаться без границ.

Граница задается с помощью свойства CSS border:

Пример

table, th, td {
    border: 1px solid black;
}

Горизонтальные и вертикальные границы в таблице HTML

Горизонтальные и вертикальные границы в таблице HTML

Бывают ситуации, когда необходимо задать частичное отображение границ ячеек в таблице. Чтобы таблица визуально выглядела, как расчерченная по горизонтали, необходимо обеспечить отображение нижней границы ячеек. А если сделать так, чтобы видны были лишь боковые границы, таблица получается исключительно из столбцов.

В этом ничего сложного нет и добиться таких эффектов можно при помощи все того же CSS, используя такие свойства как: border-top, border-right, border-bottom, border-left.

Каждое из вышеперечисленных свойств позволяет обеспечить отображение одной конкретной границы ячейки: верхней, правой, нижней и левой, соответственно.

Пример:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Пример таблицы</title>
    <style>
        table {
            border: 0;
            border-collapse: collapse;
        }

        td {
            border-bottom: solid 1px blue;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <td>Верхняя левая ячейка</td>
        <td>Верхняя правая ячейка</td>
    </tr>
    <tr>
        <td>Нижняя левая ячейка</td>
        <td>Нижняя правая ячейка</td>
    </tr>
</table>
</body>
</html>

Результат в браузере:
Таблица с только нижними границами

loader

seodon.ru | Учебник HTML - Границы, рамки и отступы HTML-таблиц

Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

Мы уже выяснили с вами, что у HTML-таблиц есть рамки, хотя по умолчанию их браузеры и не показывают. Но это еще не все, у каждой ячейки таблицы тоже есть рамка, которая называется

граница ячейки. Но и это еще не все, используя специальные атрибуты тега <TABLE> можно изменять расстояния между ячейками и от ячеек до рамки таблицы, а также внутренние отступы от границ ячеек до их содержимого.

Рамка HTML-таблицы, границы ячеек, расстояния между ними и внутренние отступы.

Итак, для создания рамки HTML-таблицы и границ ее ячеек используется всего один атрибут тега <TABLE> — border. Значением атрибута являются целые неотрицательные числа (ноль по умолчанию), которые означают размер в пикселях. Но, внимание, размер изменяется только у рамки таблицы, у границ ячеек он всегда неизменен.

<table border="число">...</table>

Для изменения расстояния между ячейками (их границами) и от ячеек до рамки таблицы в теге <TABLE> применяется атрибут cellspacing. Его значениями тоже могут быть только числа, отмеряющие расстояния в пикселях.

<table cellspacing="число">...</table>

Чтобы установить внутренние отступы от границ ячеек до их содержимого

необходимо в теге <TABLE> использовать атрибут cellpadding. И его значения это числа, означающие пиксельные размеры.

<table cellpadding="число">...</table>

Обратите внимание, что браузеры по умолчанию устанавливают небольшие (в два пикселя) значения cellspacing и cellpadding, поэтому чтобы убрать расстояния вовсе — установите у атрибутов значения ноль (0).

Пример границ, рамок и отступов HTML-таблиц

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Границы, рамки и отступы таблиц</title>
</head>
<body>
 <p>Таблица с измененными отступами и расстояниями:</p>
 <table border="5" cellspacing="10" cellpadding="15">
  <tr><td>Ячейка 1.1</td><td>Ячейка 1.2</td><td>Ячейка 1.3</td></tr>
  <tr><td>Ячейка 2.1</td><td>Ячейка 2.2</td><td>Ячейка 2.3</td></tr>
  <tr><td>Ячейка 3.1</td><td>Ячейка 3.2</td><td>Ячейка 3.3</td></tr>
 </table>
 
 <p>Таблица только с установленными рамкой и границами ячеек:</p>
 <table border="5">
  <tr><td>Ячейка 1.1</td><td>Ячейка 1.2</td><td>Ячейка 1.3</td></tr>
  <tr><td>Ячейка 2.1</td><td>Ячейка 2.2</td><td>Ячейка 2.3</td></tr>
  <tr><td>Ячейка 3.1</td><td>Ячейка 3.2</td><td>Ячейка 3.3</td></tr>
 </table>

 </body>
</html>

Результат в браузере

Таблица с измененными отступами и расстояниями:

Ячейка 1.1Ячейка 1.2Ячейка 1.3
Ячейка 2.1Ячейка 2.2Ячейка 2.3
Ячейка 3.1Ячейка 3.2Ячейка 3.3

Таблица только с установленными рамкой и границами ячеек:

Ячейка 1.1Ячейка 1.2Ячейка 1.3
Ячейка 2.1Ячейка 2.2Ячейка 2.3
Ячейка 3.1Ячейка 3.2Ячейка 3.3

Естественно не обязательно рисовать у таблицы рамку и границы ячеек, чтобы изменять внутренние отступы и расстояния между ячейками.

Согласно синтаксиса HTML, браузеры прибавляют значения cellspacing и cellpadding к размерам таблицы и ее ячеек. Например, если вы установите ширину ячейки в 100 пикселей и cellpadding="10" — браузеры прибавят к ширине 20 пикселей (по 10 слева и справа) и она станет равна 120 пикселей. В общем, по ходу дела разберетесь.

Отступление от темы или как убрать отступы по краям страницы

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

В свое время у тега <BODY> существовало четыре атрибута, которые устанавливали размер этих отступов для каждой стороны страницы: topmargin (сверху), rightmargin (справа), bottommargin (снизу) и leftmargin (слева). Сейчас эти атрибуты устарели, поэтому будем применять стили (CSS). Итак, изменить расстояния отступов по краям страницы можно несколькими способами, я покажу вам два, а о третьем узнаете, если решите изучать CSS.

Способ первый. B теге <BODY> указать атрибут style со следующими значениями:

<body>...</body> — убирает отступы сразу со всех сторон HTML-страницы.

<body>...</body> — регулирует размер отступов для каждой стороны по часовой стрелке. Как правило используются размеры в пикселях, например: <body style="margin:5px 3px 4px 5px">...</body>

Второй и более удобный способ. В теге <STYLE>, с которым вы познакомились в уроке Меняем цвета ссылок, добавить еще одну строчку:

<style type="text/css">
...
body {margin:0}
</style>

Или:

<style type="text/css">
...
body {margin:сверху справа снизу слева}
</style>

Домашнее задание.

В этом уроке я тоже не буду все подробно описывать — только общие моменты. Для полноты картины посмотрите результат примера.

  1. Создайте три таблицы, каждая должны состоять из одной строки и трех столбцов (колонок).
  2. В первой таблице разместите Header или «шапку» страницы (не путать с «шапкой» HTML-документа), во второй — левое и правое меню, а также основное содержимое (контент), в третьей — Footer или «подвал» страницы.
  3. Пусть ширина первого и последнего столбца каждой таблицы будет фиксированная.
  4. Важно. Используйте тег <IMG> только для создания четырех кнопок горизонтального меню в «шапке» страницы. В остальных случаях пусть изображения идут фоном, а во вторых ячейках таблиц вообще используются только цвета, причем в первой и последней таблице это #99FF99.
  5. Пусть текст контента страницы будет выровнен по обеим сторонам ячейки таблицы, а заголовок располагается по центру.
  6. Что касается расстояний между ячейками таблиц, а также отступов ячеек, то думайте сами, где их надо совсем убрать, а где — увеличить.

Посмотреть результат → Посмотреть ответ

Таблица без рамки | htmlbook.ru

Хотя линии между ячейками позволяют четко отделить одни данные от других, ту же самую функцию выполняет и пустое пространство вокруг текста. А чтобы таблица выделялась на веб-страницы, для нее устанавливают определенный цвет фона. Заголовок при этом допустимо задать другого цвета, как показано на рис. 1.

Рис. 1. Вид таблицы без рамки

Для изменения цвета фона таблицы используем свойство background, добавляя его к селектору TABLE. Для красоты внизу таблицы рисуем линию с помощью свойства border-bottom (пример 1).

Пример 1. Создание таблицы без рамки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблица</title>
  <style type="text/css">
   TABLE {
    width: 300px; /* Ширина таблицы */
    border-bottom: 2px solid maroon; /* Линия внизу таблицы */
    background: #fffacd; /* Цвет фона таблицы */
   }
   TH {
    background: maroon; /* Цвет фона заголовка */
    color: white; /* Цвет текста */
    text-align: left; /* Выравнивание по левому краю */
   }
   TD, TH {
    padding: 3px; /* Поля вокруг текста */
   }
  </style>
 </head> 
 <body> 
  <table cellspacing="0">
   <tr>
    <th>&nbsp;</th><th>2004</th><th>2005</th><th>2006</th>
   </tr>
   <tr>
    <td>Рубины</td><td>43</td><td>51</td><td>79</td>
   </tr>
   <tr>
    <td>Изумруды</td><td>28</td><td>34</td><td>48</td>
   </tr>
   <tr>
    <td>Сапфиры</td><td>29</td><td>57</td><td>36</td>
   </tr>
  </table>
 </body>
</html>

Поскольку содержимое тега <th> исходно выравнивается по центру, то для изменения этой характеристики в данном примере применяется стилевое свойство text-align со значением left. Можно поступить наоборот и задать выравнивание по центру для ячеек <td>. Но содержимое первой колонки с названиями камней лучше оставить выровненным по левому краю. Чтобы установить для разных колонок различное выравнивание содержимого рассмотрим два способа.

Первый метод заключается в использовании тега <col>, он добавляется в контейнер <table> и устанавливает, в частности, выравнивание для отдельных колонок (пример 2).

Пример 2. Выравнивание с помощью тега <col>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблица</title>
  <style type="text/css">
   TABLE {
    width: 300px; /* Ширина таблицы */
    border-bottom: 2px solid maroon; /* Линия внизу таблицы */
    background: #fffacd; /* Цвет фона таблицы */
   }
   TH {
    background: maroon; /* Цвет фона заголовка */
    color: white; /* Цвет текста */
   }
   TD, TH {
    padding: 3px; /* Поля вокруг текста */
   }
  </style>
 </head> 
 <body> 
  <table cellspacing="0">
  <!-- Выравнивание первой колонки по левому краю -->
  <col align="left">
 
  <!-- Выравнивание остальных колонок по центру -->
  <col span="3" align="center">
   <tr>
    <th>&nbsp;</th><th>2004</th><th>2005</th><th>2006</th>
   </tr>
   <tr>
    <td>Рубины</td><td>43</td><td>51</td><td>79</td>
   </tr>
   <tr>
    <td>Изумруды</td><td>28</td><td>34</td><td>48</td>
   </tr>
   <tr>
    <td>Сапфиры</td><td>29</td><td>57</td><td>36</td>
   </tr>
  </table>
 </body>
</html>

Атрибут align тега <COL> указывает, по какой стороне выравнивать ячейки колонки, а span определяет число колонок, к которым будут применяться заданные параметры. Если этот атрибут отсутствует, то тег <col> работает только для одной колонки.

Выравнивание содержимого колонок с помощью тега <col> работает в браузере Internet Explorer и не действует в браузере Firefox и некоторых других.

Второй метод универсальный, работает во всех браузерах и основан на добавлении отдельного класса для определенных ячеек.

Создаем стилевой класс, например, с именем jewel и применяем его к ячейкам левой колонки (пример 3).

Пример 3. Выравнивание с помощью стилей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблица</title>
  <style type="text/css">
   TABLE {
    width: 300px; /* Ширина таблицы */
    border-bottom: 2px solid maroon; /* Линия внизу таблицы */
    background: #fffacd; /* Цвет фона таблицы */
   }
   TH {
    background: maroon; /* Цвет фона заголовка */
    color: white; /* Цвет текста */
   }
   TD, TH {
    padding: 3px; /* Поля вокруг текста */
    text-align: center; /* Выравнивание по центру */
   }
   TD.jewel {
    text-align: left; /* Выравнивание по левому краю */
    background: #ccc; /* Цвет фона */
   }
  </style>
 </head> 
 <body> 
  <table cellspacing="0">
   <tr>
    <th>&nbsp;</th><th>2004</th><th>2005</th><th>2006</th>
   </tr>
   <tr>
    <td>Рубины</td><td>43</td><td>51</td><td>79</td>
   </tr>
   <tr>
    <td>Изумруды</td><td>28</td><td>34</td><td>48</td>
   </tr>
   <tr>
    <td>Сапфиры</td><td>29</td><td>57</td><td>36</td>
   </tr>
  </table>
 </body>
</html>

В данном примере изменяется цвет фона и способ выравнивания для всех ячеек, где установлен атрибут. Результат примера показан на рис. 2.

Рис. 2. Таблица без рамки с выделенной левой колонкой

Строки таблицы | htmlbook.ru

При большом количестве строк в таблице бывает трудно сопоставлять данные из разных колонок между собой. Для этого требуется визуально отделить одну строку таблицы от другой — либо с помощью линий, либо за счет добавления фонового цвета.

Вначале разберем вариант использования горизонтальных линий. На рис. 1 приведен один из возможных способов акцентирования внимания на строках таблицы. Каждая строка сверху и снизу обрамляется линией, за счет этого взгляд посетителя скользит вдоль них и не перескакивает на соседнюю строку. При этом данные, находящиеся в колонках, также связываются между собой, но уже за счет одновременного выравнивания по левому краю и пустого пространства между колонками.

Рис. 1. Таблица со строками, выделенными с помощью линий

Линии между строк устанавливаются достаточно просто, для этого следует добавить стилевое свойство border-bottom к селектору TD. Если вокруг таблицы содержится рамка, то нижняя граница получится удвоенной толщины. В этом случае можно убрать нижнюю линию у последней строки или скрыть нижнюю границу у таблицы (пример 1).

Пример 1. Разделение строк таблицы линиями

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблица</title>
  <style type="text/css">
   TABLE {
    width: 300px; /* Ширина таблицы */
    border: 1px solid black; /* Рамка вокруг таблицы */
    border-bottom: none; /* Убираем линию снизу */
   }
   TD, TH {
    padding: 3px; /* Поля вокруг содержимого ячеек */
   }
   TH {
    text-align: left; /* Выравнивание по левому краю */
    background: black; /* Цвет фона */
    color: white; /* Цвет текста */
    border: 1px solid white; /* Рамка вокруг ячеек */
   }
   TD {
    border-bottom: 1px solid black; /* Линия снизу */
   }
  </style>
 </head>
 <body>
  <table cellspacing="0">
   <tr>
    <th>&nbsp;</th><th>2004</th><th>2005</th><th>2006</th>
   </tr>
   <tr>
    <td>Рубины</td><td>43</td><td>51</td><td>79</td>
   </tr>
   <tr>
    <td>Изумруды</td><td>28</td><td>34</td><td>48</td>
   </tr>
   <tr>
    <td>Сапфиры</td><td>29</td><td>57</td><td>36</td>
  </tr>
  </table>
 </body>
</html>

В данном примере вертикальные линии между ячейками заголовка добавляются за счет стилевого свойства border, которое используется для селектора TH. При этом возникает пустое пространство толщиной один пиксел между границей таблицы и фоновой областью заголовка.

Применение цвета расширяет возможности по изменению вида таблицы. Например, цвет фона четных и нечетных строк может различаться, как показано на рис. 2.

Рис. 2. Таблица со строками, выделенными с помощью цвета и линий

Для изменения цвета фона нужных строк введем дополнительный класс, назовем его even, и станем добавлять его к четным строкам таблицы, а именно к тегу <tr>. Заметьте, что для селектора TR можно задавать только цвет фона через свойство background. Всякие линии, которые установлены для селектора TR, отображаться не будут. Поэтому нижнюю границу проводим у ячейки, применяя свойство border-bottom к селектору TD (пример 2).

Цвет фона нечетных строк определяется путем изменения цвета всей таблицы. Но поскольку для выборочных строк (для которых добавлен параметр) устанавливается индивидуальный цвет, то он «перекрывает» цвет фона таблицы. За счет этого и получается чередование цветных строк.

Пример 2. Выделение строк таблицы цветом

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблица</title>
  <style type="text/css">
   TABLE {
    width: 300px; /* Ширина таблицы */
    background: #fffff0; /* Цвет фона нечетных строк */
    border: 1px solid #a52a2a; /* Рамка вокруг таблицы */
    border-collapse: collapse; /* Убираем двойные линии между ячейками */
   }
   TD, TH {
    padding: 3px; /* Поля вокруг содержимого ячейки */
   }
   TD {
    text-align: center; /* Выравнивание по центру */
    border-bottom: 1px solid #a52a2a; /* Линия внизу ячейки */
   }
   TH {
    background: #a52a2a; /* Цвет фона */
    color: white; /* Цвет текста */
   }
   TR.even {
    background: #fff8dc; /* Цвет фона четных строк */
   }
   .la {
    text-align: left; /* Выравнивание по левому краю */
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <th>&nbsp;</th><th>2004</th><th>2005</th><th>2006</th>
   </tr>
   <tr>
    <td>Рубины</td><td>43</td><td>51</td><td>79</td>
   </tr>
   <tr>
    <td>Изумруды</td><td>28</td><td>34</td><td>48</td>
   </tr>
   <tr>
    <td>Сапфиры</td><td>29</td><td>57</td><td>36</td>
   </tr>
   <tr>
    <td>Аметисты</td><td>23</td><td>64</td><td>97</td>
   </tr>
  </table>
 </body>
</html>

В данном примере двойной линии внизу таблицы не возникает в результате применения свойства border-collapse со значением collapse к селектору TABLE. Этот параметр отслеживает появление двойных линий в местах соприкосновения ячеек и заменяет их одинарными линиями. Заметим, что в разных браузерах могут возникнуть разночтения по поводу цвета оставляемых линий в том случае, если цвет границы вокруг таблицы не совпадает с цветом линий под строками.

Таблицы HTML4

У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!

Для создания таблиц используются следующие теги:

  • <TABLE> - Для обрамления самой таблицы;
  • <THEAD> - Определяет заголовки элементов таблицы;
  • <TBODY> - Определяет тело таблицы;
  • <TFOOT> - Определяет нижнюю, завершающую часть таблицы;
  • <CAPTION> - Для обрамления подписи; Атрибут ALIGN={TOP | BOTTOM} - размещение заголовка относительно таблицы (вверху или внизу таблицы)
  • <COLGROUP> - Задание свойств одного или более столбцов;
  • <COL> - Задание свойств одного или более столбцов;
  • <TR> - Для обрамления рядов таблицы;
  • <TD> - Для обрамления клеток
    • <TH> -- </TH> тех, что нужно показывать пожирнее, например заголовков;
    • <TD> -- </TD> обычных.

Далее представлены ранее использовавшиеся атрибуты формирования таблиц html.

Ознакомиться с современными методами форматирования таблиц в соответствии с современным стандартом HTML5 можно на странице Таблицы HTML

Атрибуты TABLE:

имя атрибута

возможные значения

смысл

примечания

ALIGN

LEFT, RIGHT

Определяет горизонтальное положение таблицы. Задание этого атрибута фактически определяет плавающую таблицу, которую может обтекать текст. При использовании этого атрибута по окончании таблицы должна следовать команда BR.

LEFT - Таблица прижимается влево (используется по умолчанию).

RIGHT – Таблица прижимается вправо. Текст в клетках прижимается к влево.

VALIGN

TOP, MIDDLE, BOTTOM

Определяет вертикальное расположение текста в таблице

 

WIDTH

целое

Определяет ширину таблицы в пикселах или в процентах от ширины экрана. Для задания n в процентах используется знак (%) процента.

броузер использует это значение, если оно не конфликтует с требованиями ширины в соседних ячейках в том же самом столбце

HEIGHT

целое

Определяет высоту таблицы в пикселах или в процентах от высоты экрана. Позволяет при необходимости растягивать таблицу на весь экран.

броузер использует это значение, если оно не конфликтует с требованиями высоты для других ячеек в той же самой строке

BACKGROUND

URL

Задает в качестве фона графический файл.

 

BGCOLOR

 

Задает цвет фона.

 

BORDER

целое

Ширина рамки в пикселах

По умолчанию рамка не рисуется

BORDER COLOR

 

Задание цвета рамки

 

BORDER COLORLIGHT

 

Задание цвета для рамки с тенью (псевдо трехмерная графика)

Используется вместе с атрибутами BORDERCOLORDARK и BORDER

BORDER COLORDARK

 

Задание цвета для рамки с тенью (псевдо трехмерная графика

 

CELLPADDING

целое

Задает расстояние в пикселах между границей клетки и ее содержимым.

 

CELLSPACING

целое

Задает расстояние в пикселах между внешней рамкой таблицы и ее клетками внутри таблицы.

 

COLS

целое

Число столбцов в таблице. Данный атрибут ускоряет вывод таблицы, что особенно заметно для больших таблиц

 

FRAME

VOID, ABOVE, BELOW, HSIDES, LHS, RHS, VSIDES, BOX, BORDER

Определяет метод отрисовки рамки

VOID - Убрать наружную часть рамки.

ABOVE - Показывает верхнюю границу таблицы.

BELOW - Показывает нижнюю границу таблицы.

HSIDES - Показывает верхнюю и нижнюю границу таблицы.

LHS - Показывает левую границу таблицы.

RHS - Показывает правую границу таблицы.

VSIDES - Показывает левую и правую границу таблицы.

BOX - Показывает полную рамку таблицы.

BORDER - Показывает полную рамку таблицы.

RULES

NONE, GROUPS, ROWS, COLS, ALL

Определяет как будут показаны разделительные линии ( внутренние границы ) таблицы

NONE - Устраняет все границы внутри таблицы.

GROUPS - Показывает горизонтальные границы между всеми группами таблицы. GROUPS определены элементами THEAD, TBODY, TFOOT, и COLGROUP

ROWS – Показывает горизонтальные границы между всеми рядами таблицы.

COLS – Показывает вертикальные границы между всеми колонками таблицы.

ALL - Показывает все границы.


Атрибуты TD, TH:

имя атрибута

возможные значения

смысл

примечания

NOWRAP

 

подавляет перенос слов

эквивалентно использованию непрерывных пробелов (&nbsp;) вместо обычных пробелов в пределах содержимого ячейки

ROWSPAN

целое

число строк, перекрываемых ячейкой

по умолчанию 1

COLSPAN

целое

число столбцов, перекрываемых ячейкой

по умолчанию 1

COLSPEC

 

ширина колонок в символах или в процентах

например COLSPEC="20%"

ALIGN

LEFT, CENTER, RIGHT, JUSTIFY, CHAR

горизонтальное выравнивание данных в ячейке

по умолчанию LEFT или атрибут ALIGN во включающем элементе TR,

Если задано ALIGN=”CHAR”, то задается свойство CHAR=”.”, с указанием относительно какого символа выравнивать.

Свойство CHAROFF=Length заставляет сдвигать ячейки, не содержащие заданного символа

VALIGN

TOP, MIDDLE, BOTTOM, BASELINE

вертикальное выравнивание данных в ячейке

перекрывается атрибутом VALIGN во включающем элементе TR

WIDTH

целое

ширина ячейки в пикселях

броузер использует это значение, если оно не конфликтует с требованиями ширины в соседних ячейках в том же самом столбце

HEIGHT

целое

высота ячейки в пикселях

броузер использует это значение, если оно не конфликтует с требованиями высоты для других ячеек в той же самой строке

BACKGROUND, BGCOLOR, BORDERCOLOR, BORDERCOLORLIGHT, BORDERCOLORDARK

Аналогично атрибутам TABLE


Атрибуты TR только ALIGN, VALIGN – аналогично для TD, TH

Пример:

Потребление пива сотрудниками вневедомственной охраны пивзавода

Ф.И.О литров сорт
Иванов Иван Иванович 133 Хейнекен
<TABLE>
<CAPTION>потребление пива сотрудниками вневедомственной охраны
	пивзавода</CAPTION>
<TR><TH>Ф.И.О</TH>
<TH>литров</TH>
<TH>сорт</TH>
</TR>
<TR><TD> Иванов Иван Иванович </TD>

<TD ALIGN=CENTER >133</TD>
<TD>Хейнекен</TD>

</TR>
</TABLE>

Атрибуты <TABLE>:

BORDER=2 - Ширина рамки в пикселях

ALIGN=CENTER

CELLPADDING=5 – расстояние между содержимым ячеек и границей таблицы

CELLSPACING=5 – расстояние между ячейками таблицы

WIDTH="50%" - ширина таблицы в пикселях или относительно размера окна просмотрщика в процентах

COLS=4 –Количество столбов в таблице

Клетка может занимать несколько строк или столбцов. Для этого используются атрибуты ROWSPAN или COLSPAN в теге <TH> или <TD>. Для задания ширины таблицы или колонки используется атрибут WIDTH, который может быть задан в процентах или пикселях. Вот пример:

образец таблицы

 

средний

повышенная пушистость

рост

вес

самцы

29см

6.2кГ

40%

самки

25см

4.9кГ

43%

<CENTER><TABLE BORDER=2 ALIGN=CENTER CELLPADDING=5 >
<CAPTION><I>образец таблицы</I></CAPTION>
<TR><TH ROWSPAN="2"></TH>
<TH COLSPAN="2">средний</TH>
<TH ROWSPAN="2">повышенная
<BR>пушистость</TH>
</TR>
<TR><TH>рост</TH>
<TH>вес</TH>
</TR>

<TR><TH>самцы</TH>
<TD>29см</TD>
<TD>6.2кГ</TD>

<TD>40%</TD>
</TR>
</TABLE></CENTER>

<COL>

<COL ALIGN= {CENTER | LEFT | RIGHT} SPAN= n >

Задание свойств одного или более столбцов таблицы. Используется совместно с командой COLGROUP.Параметры, определяемые командой COL, "сильнее" параметров команды COLGROUP.


<COLGROUP>

Свойства, заданные командой COLGROUP, переопределяются комндой COL. Эта команда влияет на отрисовку линий, определяемых атрибутом RULES= команды TABLE.

<COLGROUP ALIGN={CENTER | LEFT | RIGHT}.SPAN= n - Задание числа последовательных столбцов.>

Пример :

<TABLE>
<COLGROUP ALIGN=RIGHT><COLGROUP SPAN=2 ALIGN=LEFT>
<TBODY>
<TR>
<TD>This column is in the first group and is right-aligned</TD>
<TD>This column is in the second group and is left-aligned</TD>
<TD>This column is in the second group and is left-aligned</TD>
</TR>
</TABLE>

Пример :

<TABLE>
<COLGROUP><COL ALIGN=RIGHT><COL ALIGN=LEFT>
<COLGROUP><COL ALIGN=CENTER>
<TBODY>
<TR>
<TD>This is the first column in the group and is right-aligned.</TD>
<TD>This is the second column in the group and is left-aligned.</TD>
<TD>This column is in a new group and is centered.</TD>
</TR>
</TABLE>

Практически все атрибуты табличных тегов считаются устаревшими.

Таблицы HTML – валидное оформление таблиц по стандарту HTML5.

Читать дальше: Фреймы в HTML

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *