: элемент группы столбцов таблицы

[править] Пример таблицы с параметрами и стилями

Пример таблицы со стилями CSS.

<table border="1" cellpadding="5" 
style="border-collapse: collapse; border: 1px solid black;"> 
  <caption align="bottom"> Пример таблицы </caption>
  <tr style="background-color: silver">
    <th> Заголовок 1 </th>
    <th> Заголовок 2 </th>
  </tr>
  <tr>
    <td> Ячейка 1 </td>
    <td> Ячейка 2 </td>
  </tr>
  <tr>
    <td> Ячейка 3 </td>
    <td> Ячейка 4 </td>
  </tr>
</table>

В этом примере:

• — установка толщины рамки.
• — отступы от рамки до текста внутри таблицы.
• — стиль CSS, который убирает задвоенность рамки.
• — стиль рамки. Разные браузеры по-разному воспринимают: отрисовывают указанным стилем либо внешнюю границу, либо и внутренние перемычки тоже.
• — цвет фона у группы ячеек назначен светло-серым (см. Цвета в HTML). Для этой же цели можно использовать атрибут HTML bgcolor.
• — перемещение заголовка таблицы вниз (стиль «caption-side: bottom» не отрабатывает в IE).

Пример правильно отрабатывает в MediaWiki и в LiveJournal. При помощи других элементов описания стилей можно задать стили сразу для всех таблиц HTML в документе (тег ), сразу для всех или группы документов сайта (тег ), либо только для некоторых таблиц, указав для них имя класса (атрибут class).

Основная статья: CSS

Example

We will discuss the <colgroup> tag below, exploring examples of how to use the <colgroup> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

• HTML5
• HTML4
• XHTML

HTML5 Document

If you created a new web page in HTML5, your <colgroup> tag might look like this:

In this HTML5 Document example, we have created a table with <colgroup>, <thead> and <tbody> sections. Within the <colgroup> section, we’ve used two <col> tags. The first <col> tag groups the first three columns and sets the background color of the columns to #FFF9C4. The second <col> tag groups the 4th column and sets its background color to yellow.

HTML 4.01 Transitional Document

If you created a new web page in HTML 4.01 Transitional, your <colgroup> tag might look like this:

In this HTML 4.01 Transitional Document example, we have created a table with <colgroup>, <thead> and <tbody> sections. Within the <colgroup> section, we’ve used two <col> tags. The first <col> tag groups the first three columns and sets the background color of the columns to #FFF9C4. The second <col> tag groups the 4th column and sets its background color to yellow.

XHTML 1.0 Transitional Document

If you created a new web page in XHTML 1.0 Transitional, your <colgroup> tag might look like this:

In this XHTML 1.0 Transitional Document example, we have created a table with <colgroup>, <thead> and <tbody> sections. Within the <colgroup> section, we’ve used two <col> tags. The first <col> tag groups the first three columns and sets the background color of the columns to #FFF9C4. The second <col> tag groups the 4th column and sets its background color to yellow.

XHTML 1.0 Strict Document

If you created a new web page in XHTML 1.0 Strict, your <colgroup> tag might look like this:

In this XHTML 1.0 Strict Document example, we have created a table with <colgroup>, <thead> and <tbody> sections. Within the <colgroup> section, we’ve used two <col> tags. The first <col> tag groups the first three columns and sets the background color of the columns to #FFF9C4. The second <col> tag groups the 4th column and sets its background color to yellow.

XHTML 1.1 Document

If you created a new web page in XHTML 1.1, your <colgroup> tag might look like this:

In this XHTML 1.1 Document example, we have created a table with <colgroup>, <thead> and <tbody> sections. Within the <colgroup> section, we’ve used two <col> tags. The first <col> tag groups the first three columns and sets the background color of the columns to #FFF9C4. The second <col> tag groups the 4th column and sets its background color to yellow.

HTML Справочник

HTML по алфавитуHTML по категориямHTML Поддержка браузераHTML АтрибутыHTML Глобальные атрибутыHTML СобытияHTML ЦветаHTML CanvasHTML Аудио/видеоHTML Наборы символовHTML Типы документовHTML URL КодировкаHTML Коды языкаHTML Коды странHTTP СообщенияHTTP МетодыКонвертер PX в EMКомбинации клавиш

HTML Теги

<!—Комментарий—>
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> — <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<picture>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<svg>
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>

HTML Теги

<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><keygen><label><legend><li><link><main><map><mark><menu><menuitem><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><table><tbody><td><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

Еще примеры

Пример

Выравнивание текста в столбцах таблицы (с помощью CSS):

<table style=»width:100%»>  <tr>   
<th>ISBN</th>    <th>Заголовок</th>   
<th>Прайс</th>  </tr>  <tr>   
<td>3476896</td>    <td>Мой первый HTML</td>   
<td style=»text-align:right»>$53</td>  </tr>  <tr>   
<td>2489604</td>    <td>Мой первый CSS</td>   
<td style=»text-align:right»>$47</td>  </tr></table>

Пример

Вертикальное выравнивание текста в столбцах таблицы (с помощью CSS):

<table style=»height:200px»>  <tr>   
<th>Месяц</th>    <th
style=»vertical-align:bottom»>Сбережения</th>  </tr>  <tr>   
<td>Январь</td>    <td
style=»vertical-align:bottom»>$100</td>  </tr></table>

Пример

Укажите ширину столбца таблицы (с помощью CSS):

<table>  <tr>    <th
style=»width:200px»>Месяц</th>    <th>Сбережения</th> 
</tr>  <tr>    <td>Январь</td>   
<td>$100</td>  </tr>  <tr>   
<td>Февраль</td>    <td>$80</td>  </tr>
</table>

Атрибуты

HTML Теги

<!—Комментарий—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>