Html урок 5. создание таблицы в html

HTML тег

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

Чтобы понять, как составить таблицу, давайте рассмотрим ее простейший вариант:

Основное содержимое таблицы заключается в тег <table>..</table>.

Каждая строка таблицы помещается в элемент <tr>. </tr>.

Ячейка заголовка таблицы помещается в элемент <th>. </th> (при этом содержимое отображается жирным начертанием и выравнивается по центру).

Каждая ячейка данных таблицы помещается в элемент <td>. </td> .

Наименование таблицы, если оно требуется размещается внутри элемента

.

(необязательный элемент)Обращаю Ваше внимание, что если Вы планируете использовать данный элемент в своей таблице, то он должен следовать в документе сразу за элементом

Атрибуты

Пример использования

К данной таблице для наглядности мы добавили атрибут border (граница) со значением «1» , которое определяет, что граница должна отображаться вокруг ячеек таблицы. Атрибут граница практически не используется в HTML, в данном случае использование CSS было бы предпочтительнее и давало бы более гибкие возможности.

Пример таблицы, составленной на HTML.

Объединение столбцов

Объединение столбцов в элементах <td> допускается с помощью атрибута colspan (при этом ячейка данных растягивается вправо на заданное количество ячеек).

В браузере это выглядит следующим образом:

Пример использования атрибута colspan HTML тега <td> (число столбцов, которое ячейка данных должна охватывать).

Объединение строк

Объединение строк в элементах <th> (ячейка заголовка таблицы) или <td> допускается с помощью атрибута rowspan (диапазон ячеек задается сверху вниз и охватывает несколько строк – ячейка растягивается вниз).

Пример таблицы с объединёнными столбцами и строками на HTML.

Параметры тегов th tr и td

<tr><td><th>

• align — выравнивает текст в ячейках по горизонтали, имеет такие значения: по правому краю ячейки (right), по левому (left), по центру (center)
• valign — выравнивает текст в ячейках по вертикали, имеет такие значения: текст придерживается верхней части ячейки(top), нижней части (bottom), по центру (middle)
• bgcolor — задает фоновый цвет строки или ячейки
• width — задает ширину ячеек в пикселах или %, где 100% — вся ширина таблицы
• height — задает высоту ячеек в пикселах или %, где 100% — вся ширина таблицы

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

Отредактируем нашу таблицу таким образом (фрагменты на которые стоит обратить внимание выделены красным):

В браузере получим такой результат:

Рассмотрим выделенные параметры. В данной таблице cellspacing=»0″ что отключило промежуток между основной рамкой и ячейками таблицы. Задан параметр border=»3″ и bordercolor=»yellow» — это создало границе таблицы желтого цвета, шириной в 3 пиксела. Тег tr bgcolor=»plum» — задал фон всем ячейкам первой строки, которая является шапкой таблицы. Теги th width=»40%» 20% 40% — задали ширину столбцов таблицы в процентах, именно поэтому центральный столбец меньше остальных. Тег tr align=»center» — теперь весь текст в ячейках этой строки выравнивается по центру. Тег td bgcolor=»red» — задал красный фон данной ячейки. Цвет фона ячейки стоит по приоритетам выше чем, цвет в таблице в общем, поэтому в некоторых ячейках розовый цвет сменился на другие.

Параметры объединения ячеек тега td

Ячейки таблицы можно объединять между собой, убирая их горизонтальные и вертикальные границы. Для этого в теге <td> используют такие параметры:

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

Cоздадим небольшую веб-страничку с табличной структурой и поместим в ее основной контент нашу последнюю таблицу:

Данная страничка создана с помощью таблицы, с тремя строками и двумя столбцами (2×3). Ячейки строк «Шапка сайта» и «Нижняя часть сайта» объединены с помощью параметра td colspan=»2″. Как это выглядит в HTML документе:

В результате получилась таблица в таблице. Также построение сайтов может быть с помощью фреймов и блоков

Знание табличной структуры сайтов очень важно и в дальнейшем очень поможет. Значительно расширяет возможности работы с таблицами CSS: Оформление таблиц в CSS

Урок№8: Работа с формами
Все уроки

Таблицы в HTML

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

Структура таблицы:

• Border – рамка шириной 2 px;
• Cellpadding-расстояние между внешними границами ячеек таблицы;
• Cellspacing-расстояние между внешними границами ячеек таблицы.
• Height- высота таблицы;
• Width-  ширина таблицы.
• Caption- тег для создания заголовка таблицы, может размещаться только внутри контейнера .

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

Теги  и
предназначены для объединения ячеек :

Атрибуты тега

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

Кроме атрибута border есть еще несколько важных атрибутов поддерживаемых тегом <table>. Давайте их рассмотрим.

Атрибут align — задает выравнивание таблицы на странице. Может принимать значения left, center, right, которые задают выравнивание соответственно по левому краю, по центру и по правому краю. По умолчанию равен left.

Атрибут background, который задает фоновый рисунок к таблице. В качестве значения принимает адрес файла с изображением.

bgcolor — устанавливает цвет фона таблицы. Можно использовать совместно с атрибутом background.

Атрибут bordercolor задает цвет рамки таблицы.

Cellpadding — определяет расстояние между границей ячейки и ее содержимым. Позволяет улучшить читабельность таблицы. В качестве значения может быть любое положительное число.

Cellspacing — задает расстояние между внешними границами ячеек.

На этом рассказывать о том как вставить таблицу в html страницу я закончу, только подведу итоги:

• для вставки таблицы используются теги <table> — обозначение таблицы, <tr> — добавление строки и <td> — вставка ячейки;
• таблица представляет из себя блочные элемент web-страницы;
• в качестве содержимого ячеек может быть не только текст, но и картинки и другие таблицы;
• таблица может содержать три вида секций: секция заголовка — <thead>, секция завершения <tfoot> и секция тела — <tbody>;
• для объединения ячеек используем атрибуты тега <td> colspan и rowspan.

Создание таблицы в HTML

Рассмотрим теги для создания таблицы:

1
2
3
4
5

<table>
	<tr>
		<td> содержание <td>
	<tr>
<table>

Результат:
Добавим границу для таблицы — атрибут :

1
2
3
4
5

<table border="1">
	<tr>
		<td> содержание <td>
	<tr>
<table>

Результат:

Создания таблицы начинается с тега (от англ. «таблица»). Тег служит для создания строки. В строке располагаются ячейки — тег . Завершается таблица закрывающим тегом

Или пример таблицы посложнее:

Атрибуты тега TABLE

Важно: Для ячеек-заголовка таблицы используется тег вместо. Браузер размещает содержимое таких ячеек по центру и делает шрифт полужирным

Атрибуты тега TD или TH — ячейки

Важно:

• Тег служит для создания заголовка таблицы
• Для группировки заголовочных ячеек используется тег
• Для группировки основного содержимого таблицы используется тег
• Тег определяет нижнюю часть таблицы

Тег заголовка таблицы может иметь атрибут, определяющий расположение заголовка — — со следующими значениями:— заголовок над таблицей,— заголовок под таблицей,— заголовок вверху и выровнен влево,— заголовок вверху и выровнен вправо. К сожалению не все значения «работают» во всех браузерах.

Пример: Создать «каркас» таблицы со всеми тегами группировки

Выполнение:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<table  border="1">
<caption>таблица<caption>
<thead>
	<tr>
	<th>Заголовок 1<th><th>3аголовок 2<th>
	<tr>
<thead>
<tbody>
	<tr>
	<td>содержимое<td><td>содержимое<td>
	<tr>
<tbody>
<tfoot>
...
<tfoot>
<table>

Лабораторная работа №1: Создайте таблицу по образцу. У таблицы должен быть заголовок и области для группировки (thead — 1-я строка таблицы, tbody — 2-я и 3-я строки таблицы, tfoot — 4-я строка таблицы).

More Examples

How to add collapsed borders to a table (with CSS):

<html><head><style>table, th, td {  border: 1px solid
black;  border-collapse: collapse;}</style></head><body><table>  <tr>   
<th>Month</th>    <th>Savings</th>  </tr> 
<tr>    <td>January</td>   
<td>$100</td>  </tr>  <tr>   
<td>February</td>    <td>$80</td>  </tr>
</table></body></html>

How to right-align a table (with CSS):

<table style=»float:right»>  <tr>   
<th>Month</th>    <th>Savings</th>  </tr> 
<tr>    <td>January</td>   
<td>$100</td>  </tr>  <tr>   
<td>February</td>    <td>$80</td>  </tr>
</table>

How to center-align a table (with CSS):

<html><head><style>table, th, td {  border: 1px solid
black;}table.center {  margin-left: auto;  
margin-right: auto;}</style></head><body><table
class=»center»>  <tr>   
<th>Month</th>    <th>Savings</th>  </tr> 
<tr>    <td>January</td>   
<td>$100</td>  </tr>  <tr>   
<td>February</td>    <td>$80</td>  </tr>
</table>

How to add background-color to a table (with CSS):

<table style=»background-color:#00FF00″>  <tr>   
<th>Month</th>    <th>Savings</th>  </tr> 
<tr>    <td>January</td>   
<td>$100</td>  </tr>  <tr>   
<td>February</td>    <td>$80</td>  </tr>
</table>

How to add padding to a table (with CSS):

<html><head><style>table, th, td {  border: 1px solid
black;}th, td {  padding: 10px;}</style></head><body><table>  <tr>   
<th>Month</th>    <th>Savings</th>  </tr> 
<tr>    <td>January</td>   
<td>$100</td>  </tr>  <tr>   
<td>February</td>    <td>$80</td>  </tr>
</table></body></html>

How to set table width (with CSS):

<table style=»width:400px»>  <tr>   
<th>Month</th>    <th>Savings</th>  </tr> 
<tr>    <td>January</td>   
<td>$100</td>  </tr>  <tr>   
<td>February</td>    <td>$80</td>  </tr>
</table>

How to create table headers:

How to create a table with a caption:

<table> 
<caption>Monthly savings</caption>  <tr>   
<th>Month</th>    <th>Savings</th>  </tr> 
<tr>    <td>January</td>   
<td>$100</td>  </tr>  <tr>   
<td>February</td>    <td>$80</td>  </tr>
</table>

Простая таблица

Код простой таблицы, состоящей из 2 столбцов и 3 строк будет иметь следующий вид:

<table border="1" width="52%"> <tr>   <td>содержимое в 1 столбце и 1 строке</td>   <td>содержимое во 2 столбце и 1 строке</td> </tr> <tr>   <td>содержимое в 1 столбце и 2 строке</td>   <td>содержимое в 2 столбце и 2 строке</td> </tr> <tr>   <td>содержимое в 1 столбце и 3 строке</td>   <td>содержимое в 2 столбце и 3 строке</td> </tr></table>

Внешний вид:

Строки и ячейки таблицы

Каждая таблица состоит из строк и ячеек, а задаётся тегом <table> — это контейнер для остальных тегов таблицы.

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

Важно понимать. Дочерними элементами строки могут быть только ячейки (и заголовочная ячейка
)

А сама строка

Рассмотрим пример:

Мы видим три строки (элементы <tr>). В каждой из строк по три ячейки (<td>). Представим это HTML-кодом:

Объединение ячеек

Ячейки можно объединять (растягивать по горизонтали и вертикали) с помощью специальных атрибутов. При этом поглощаемые ячейки задавать своими тегами уже не придётся.

Столбцы таблицы объединяются атрибутом colspan, а строки — атрибутом rowspan.

И тут важно не запутаться:

Атрибут colspan тегов <td> и <th> объединяет ячейки по горизонтали (то есть ячейки одной строки). Значение colspan указывает, сколько столбцов пересекает ячейка.

Атрибут rowspan тегов <td> и <th> объединяет ячейки по вертикали (то есть ячейки разных строк). Значение rowspan задаёт, через сколько строк проходит ячейка.

Рассмотрим пару примеров:

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

Поэтому третьи ячейки для первой и третьей строк задавать не нужно. Они уже поглощены другими. Теперь к коду:

Ещё один пример:

Как такое сверстать:

Цвет фона и текста

Для того чтобы указать фон ячейки таблицы HTML, строки или отдельной ячейки, к тегам <table>, <td> и <tr> можно применить следующие параметры:

• background — в качестве фона используется изображение. Указать можно либо имя файла, либо путь к нему;
• bgcolor — фоном является определённый цвет. Указать можно как название интересующего оттенка, так и шестнадцатеричный код.

Для того чтобы изменить цвет текста в таблице HTML, необходимо использовать тег <font>.

Например:

<table border="1" bgcolor="green">
<tr height="40" bgcolor="blue">
    <td><font color="white">Ячейка 1</font></td>
    <td bgcolor="red"></td>
</tr>
<tr>
    <td background="http://t2.gstatic.com/images?q=tbn:ANd9GcRfByY7DCMopoeaahCdF4Yi7HWMo89lEYTZVJb4GAew7ZlZNiPW">Ячейка 3</td>
    <td>Ячейка 4</td>
</tr>
</table>

Отступы таблицы в HTML

В HTML отступы в таблице задаются с помощью тега <table>:

• cellspacing — расстояние между границами соседних ячеек;
• cellpading — расстояние между содержимым и границей ячейки.

Например:

<table border="1" bgcolor="green" cellspacing="20" cellpadding="20">
<tr height="40" bgcolor="blue">
    <td><font color="white">Ячейка 1</font></td>
    <td bgcolor="red"></td>
</tr>
<tr>
    <td>
 background="http://t2.gstatic.com/images?q=tbn:ANd9GcRfByY7DCMopoeaahCdF4Yi7HWMo89lEYTZVJb4GAew7ZlZNiPW">Ячейка 3</td>
    <td>Ячейка 4</td>
</tr>
</table>

Визуальное отображение данного кода в браузере таково:

Выравнивание таблицы в HTML

Вы можете для каждой отдельной ячейки или строки задать два параметра, которые выполняют горизонтальное (align) и вертикальное (valign) выравнивание текста в таблице HTML.

Параметр align может иметь следующие значения:

• left — выравнивание по левой границе;
• right — выравнивание по правой границе;
• center — выравнивание по центру.

Параметр valign может иметь такие значения:

• bottom — выравнивание по нижней границе;
• top — выравнивание по верхней границы;
• middle — выравнивание посередине.

Пример:

<table border= "1">
 <td width="300" height="200">Текст 1</td>
   <td width="300" height="200" align="right" valign="top">Текст 2</td>
</table>

Как сделать таблицу по центру в HTML? С помощью упомянутого значения center.

Например:

<table cellpadding="0" cellspacing="0" width="100%" height="100%">
  <tr>
    <td align="center">
      <table cellpadding="60" cellspacing="4" border="1">
        <tr>
          <td>
            Текст таблицы
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Вставка изображения в HTML таблицу

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

Например:

<table border= "1">
<tr align="left"> 
   <td><img src="https://amadeya.users.photofile.ru/photo/amadeya/1288508/xlarge/42642197.jpg"></td> 
   <td> Содержимое 2 ячейки </td> </tr>
<tr align="right"> 
   <td> Содержимое 3 ячейки </td>
    <td> Содержимое 4 ячейки </td> </tr>
</table>

Дополнительными атрибутами в данном случае являются:

• width — ширина;
• height — высота;
• alt — альтернативный текст, который отображается в браузере при отключенной функции отображения изображений;
• title — подпись к картинке;
• align — горизонтальное выравнивание;
• valign — вертикальное выравнивание.

Кроме того, облачив изображение в специальный тег <a href=»страница, на которую ведёт ссылка»><img src=»имя файла.jpg»></a>, его можно использовать в качестве ссылки.

Объединение ячеек в HTML таблице

Соседствующие ячейки внутри одного столбца или строки можно объединить с помощью параметров rowspan и colspan тега <td>.

Объединение столбцов одной строчки выглядит так:

<table border="1">
<tr>
   <td colspan="3">Текст 2</td>
</tr>
<tr>
   <td>Текст 2</td>
   <td>Текст 3</td>
   <td>Текст 4</td>
</tr>
</table>

У HTML таблицы объединение ячеек одного столбца выглядит следующим образом:

<table border="1">
<tr>
   <td rowspan="3">Текст 1</td>
   <td>Текст 2</td>
</tr>
<tr>
   <td>Текст 3</td>
</tr>
<tr>
   <td>Текст 4</td>
</tr>
</table>

Шапка, тело и подвал HTML таблицы.

Как и сам сайт, наша табличка может иметь свои шапку, тело и подвал. И если вы хотите, чтобы ваш код выглядел семантически правильно для поисковых систем. Советую применять эти знания на практике.

Все 3 тега, которые мы будем изучать далее, должны содержать в себе весь контент таблицы. Который условно мы можем разбить на три большие части.

Тег thead — шапка HTML таблицы

Этот тег рекомендуется размещать первым в контенте таблицы. То есть мы заводим этот тег и уже внутри него размещаем заголовочную строку с ячейками.

Фишки тега thead:

1. Он должен встречаться только один раз на одну таблицу!
2. Независимо от того, где мы его располагаем в таблице — строки, находящиеся в этом теге, будут выводиться в начале таблицы.

Теперь вернёмся к нашей таблице, и давайте первую строку завернём в этот тег:

<table>
  <caption>Тег thead в таблице</caption>
  <thead>
    <tr>
      <th>Столбец 1</th>
      <th>Столбец 2</th>
      <th>Столбец 3</th>
      <th>Столбец 4</th>
    </tr>
  </thead>
  <tr>
    <td colspan="3">Строка2 Ячейка1 (соединена с ячейками 2 и 3)</td>
    <td rowspan="3">Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)</td>
  </tr>
  <tr>
    <td colspan="2" rowspan="2">Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4)</td>
    <td>Строка3 Ячейка3</td>
  </tr>
  <tr>
    <td>Строка4 Ячейка3</td>
  </tr>
</table>

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

Тег tfoot – подвал HTML таблицы

Хоть это и подвальчик, но помните, что этот тег рекомендуется размещать сразу после тега
.

Фишки тега tfoot:

1. Он должен встречаться только один раз на одну таблицу!
2. Независимо от того, где мы его располагаем в таблице — строки, находящиеся в этом теге, будут выводиться в конце таблицы.

Давайте мы заведём ещё одну строку в таблице, и завернём её с ячейками сразу в тег
:

<table>
  <caption>Тег tfoot в таблице</caption>
  <thead>
    <tr>
      <th>Столбец 1</th>
      <th>Столбец 2</th>
      <th>Столбец 3</th>
      <th>Столбец 4</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Подвал столбец 1</td>
      <td>Подвал столбец 2</td>
      <td>Подвал столбец 3</td>
      <td>Подвал столбец 4</td>
    </tr>
  </tfoot>
  <tr>
    <td colspan="3">Строка2 Ячейка1 (соединена с ячейками 2 и 3)</td>
    <td rowspan="3">Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)</td>
  </tr>
  <tr>
    <td colspan="2" rowspan="2">Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4)</td>
    <td>Строка3 Ячейка3</td>
  </tr>
  <tr>
    <td>Строка4 Ячейка3</td>
  </tr>
</table>

А вот и наша табличка:

Посмотрите внимательно, несмотря на то, что мы разместили тег
в середине таблицы, его содержимое выводится в её конце!

Тег tbody – тело таблицы.

В отличии от первых двух – этот тег может встречать в таблице сколько угодно раз. Фишек у него никаких нет. Он просто семантически указывает для поисковых роботов, что в нём идёт контент таблицы.

Вот такой код получится в итоге:

<table>
  <caption>Тег tbody в таблице</caption>
  <thead>
    <tr>
      <th>Столбец 1</th>
      <th>Столбец 2</th>
      <th>Столбец 3</th>
      <th>Столбец 4</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Подвал столбец 1</td>
      <td>Подвал столбец 2</td>
      <td>Подвал столбец 3</td>
      <td>Подвал столбец 4</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td colspan="3">Строка2 Ячейка1 (соединена с ячейками 2 и 3)</td>
      <td rowspan="3">Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)</td>
    </tr>
    <tr>
      <td colspan="2" rowspan="2">Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4)</td>
      <td>Строка3 Ячейка3</td>
    </tr>
    <tr>
      <td>Строка4 Ячейка3</td>
    </tr>
  </tbody>
</table>

Внешне, наша таблица никак не изменилась! Поэтому и приводить её я здесь не буду.

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

Видео 3. HTML таблицы – шапка, тело и подвал

Кроме разбора на практике самих тегов, в этом видео, дополнительно, вы увидите, как оформить шапку, контент и подвал таблицы при помощи стилей.

Испытание: простая, но аккуратная таблица

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Простая, но аккуратная таблица</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Посещения по городам</h1>
    <table>

    <tr>
      <td>Город   
      <td>Посещения   
      <td>Страниц     
      <td>Время
    </tr>
    
    <tr>
     <td> СПб     
     <td>199         
     <td>18,02       
     <td>00:13:45  
    </tr>
    
    <tr>
        <td>Москва  
        <td>69          
        <td>1,48        
        <td>00:00:44 
    </tr>
    
    <tr>
        <td>Киев    
        <td>5           
        <td>13,43       
        <td>00:18:07 
    </tr>
    </table>
  </body>
</html>

CSS:

body {
    width 350px;
    margin ;
    padding  10px;

    font-size 14px;
    font-family "Arial", sans-serif;
}

table {
    border-collapse collapse;
}

td {
    border-collapse collapse;
    border-bottom 2px solid lightgray;
    padding 10px;
  }

Объединение колонок в группы

Для объединения колонок по общему признаку применяются элементы «col» и «colgroup».
Первый из них является пустым и формируется
одиночным тегом <col>
(от англ. column – колонка), второй формируется
парным тегом <colgroup>
(от англ. column group – группа колонок).
Оба элемента должны располагаться сразу после элемента «caption» или, при его отсутствии, после открывающего тега
<table>.

Каждый элемент «col» представляет одну или несколько колонок, отсчет которых происходит слева направо и
соответствует порядку следования элементов «col» в коде. Если нужно, чтобы элемент представлял несколько колонок,
то используется атрибут span, который в качестве значений принимает натуральные
числа, указывающие требуемое количество колонок. Рассмотрим использование элемента «col» подробнее на примере
№3.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Работа с колонками таблицы</title>
</head>
<body>
	<!-- Создадим таблицу с границами -->
	<table border="1">
		<caption>Таблица с 8 колонками</caption>
		
		<!-- Установим желтый фон первых двух колонок  -->
		<col  style="background-color: yellow" span="2">
		
		<!-- Фон третьей колонки сделаем красным  -->
		<col  style="background-color: red">
		
		<!-- Три колонки пропустим  -->
		<col span="3">
		
		<!-- Фон седьмой колонки сделаем серым  -->
		<col  style="background-color: grey">
		
		<tr>
			<td>1.1</td> <td>1.2</td> <td>1.3</td> <td>1.4</td> 
			<td>1.5</td> <td>1.6</td> <td>1.7</td> <td>1.8</td> 
		</tr>
		<tr>
			<td>2.1</td> <td>2.2</td> <td>2.3</td> <td>2.4</td> 
			<td>2.5</td> <td>2.6</td> <td>2.7</td> <td>2.8</td>
		</tr>
	</table>
</body>
</html>

Пример №3. Использование элемента «col»

Таким образом, если мы, например, хотим применить общий стиль CSS для колонок с четвертой по восьмую включительно, то
необходимо сперва создать элемент «col», указать в нем атрибут span=»3″, а затем
сформировать еще один элемент «col» с атрибутом span=»5″, привязав к нему
необходимые стили CSS.

Столбцы таблицы «col» могут также быть объединены в лексические группы при помощи элемента
«colgroup». Если мы, например, хотим задать столбцам желтый цвет фона, то необходимо перечислить их внутри
контейнера «colgroup», указав в его открывающем теге атрибут
style=»background-color: yellow». В результате отпадает необходимость указывать этот атрибут во всех элементах
«col». Кроме того, «colgroup» может использоваться аналогично элементу
«col», и, следовательно, вперемешку с ним. В этом случае для выделения нескольких столбцов также используется
атрибут span (см. пример №4).

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Использование элементов «col» и «colgroup»</title>
</head>
<body>
	<table border="1">
		<caption>Таблица с 8 колонками</caption>
		
		<!-- Первой колонке установим синий фон -->
		<col style="background-color: blue">
		
		<!-- Зададим колонкам ширину в 60 пикселей -->
		<colgroup style="width: 60px">
			<col style="background-color: yellow">
			<col>
			<col style="background-color: red">
		</colgroup>
		
		<!-- А этим в 100 пикселей -->
		<colgroup style="width: 100px">
			<col>
			<col style="background-color: blue">
		</colgroup>
				
		<tr>
			<td>1.1</td> <td>1.2</td> <td>1.3</td> <td>1.4</td> 
			<td>1.5</td> <td>1.6</td> <td>1.7</td> <td>1.8</td> 
		</tr>
		
		<tr>
			<td>2.1</td> <td>2.2</td> <td>2.3</td> <td>2.4</td> 
			<td>2.5</td> <td>2.6</td> <td>2.7</td> <td>2.8</td>
		</tr>
	</table>
</body>
</html>

Пример №4. Использование элементов «col» и «colgroup»

Если к ячейкам и строкам таблицы, а также к элементам «thead», «tbody» и
«tfoot» через атрибуты style,
class или
id без проблем применимы практически все свойства CSS, то с элементами
«col» и «colgroup» дела обстоят как раз наоборот. Дело в том, что использование
в этих элементах указанных атрибутов с целью применения к столбцам требуемых стилей CSS не принесет ожидаемого
результата, так как практически ни одно свойство CSS просто напросто не будет применено. В итоге мы можем
использовать данные элементы только лишь для определения фона и ширины колонок, что явно не соответствует предназначению этих элементов.

Предпосылки таблиц

Вы можете установить предпосылку таблицы используя один из следующих 2 путей:

• атрибут bgcolor — вы можете установить цвет предпосылки для всей таблицы или как раз для одной клетки.

• атрибут предпосылки — вы можете установить фоновое изображение для всей таблицы или как раз для одной клетки.

Вы можете также установить цвет границы также используя атрибут bordercolor.

Пример

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border="1" bordercolor="green" background="/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
</body>
</html>

Это даст следующий:

Здесь пример атрибута предпосылки использования. Здесь мы будем использовать изображение доступное в директории /images.

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border="1" width="400" height="150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>

Это даст следующий. Здесь фоновое изображение не применилось к коллектору таблицы.

Атрибуты и свойства и

1. Свойство align=»параметр» — задает выравнивание отдельной ячейки таблицы. Может принимать следующие значения:

• left — выравнивание по левому краю
• center — выравнивание по центру
• right — выравнивание по правому краю

2. Свойство background=»URL» — задает фоновое изображение ячейки. Вместо URL должен быть написан адрес фонового изображения.

3. Свойство bgcolor=»цвет» — задает цвет фона ячейки.

4. Свойство bordercolor=»цвет» — задает цвет рамки ячейки.

5. Свойство char=»буква» — задает букву, от которой нужно сделать выравнивание. Значение атрибута align должно быть установлено как char.

6. Свойство colspan=»число» — задает число объединяемых горизонтальных ячеек.

7. Свойство height=»число» — задает высоту таблицы: либо в пикселях, либо в процентах %.

8. Свойство width=»число» — задает ширину таблицы: либо в пикселях, либо в процентах %.

9. Свойство rowspan=»число» — задает число объединяемых вертикальных ячеек.

10. Свойство valign=»параметр» — выравнивание содержимого ячейки по вертикали.

• top — выравнивание содержимого ячейки по верхнему краю строки
• middle — выравнивание по середине
• bottom — выравнивание по нижнему краю
• baseline — выравнивание по базовой линии

Примечание 1

Для тега <tr> доступны такие же параметры, что и для <td>. Параметры для одного тега <tr> будут иерархично применены ко всем <td> внутри него

Table captions and headings

Most tables need some sort of text that describes the purpose of the table. We can use the element to solve this problem. It is optional. But since it displays the caption (or title) of the table, it helps with ease of use and accessibility.

When in use, it comes right after the opening tag and is followed by a matching closing tag:

It is also common to have table cells that describe groups of data within a table. The element defines a set of rows which represent the head of columns of the table. It is an optional element and can come either right after the tag or the tag when available.

The tag marks a cell as a table header, and it is usually at the start of a row or column. tags are always used within a tag and they with some default styling to help them stand out.