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>
Attributes
| Attribute | Value | Description |
|---|---|---|
| abbr | text |
Defines an abbreviated version of the content in a cell, or an alternative text. (User-agents, such as speech readers, may present this description before the content itself). |
| align | left rightcenterjustifychar |
Aligns the content in a cell. |
| axis | category_name |
Categorizes cells having similar content. |
| background | background |
Sets the background in a cell. |
| bgcolor |
rgb(x,x,x)
#xxxxxx colorname |
Defines the background color of a cell. |
| bordercolor | bordercolor |
Sets the color of the border. |
| char | character |
Aligns the content in a cell to a character. Is used only if attribute align=»char». |
| charoff | number |
Sets the number of characters the content will be aligned from the character specified by the char attribute. |
| colspan | number | Defines the number of columns a cell should span. The value of the attribute should be a positive integer. Default value is 1. |
| headers | header_id | Specifies one or more header cells (defined by the <th> tag) a standard cell is related to. |
| height | %pixels |
Sets the height of a cell. |
| nowrap | nowrap |
Specifies that the content inside a cell should not wrap. Not supported in HTML 5. |
| rowspan | number |
Specifies the number of rows a cell should span. The value of the attribute should be a positive integer. Default value is 1. It is not recommended to use values higher than 65534, as they will be clipped down to 65534. |
| scope | colcolgrouprowrowgroup |
Defines the cells that the header (defined in the <th>) element relates to. |
| valign |
top
middle bottom baseline |
Specifies vertical alignment of the content inside a cell. |
| width | %pixels |
Sets the width of a cell. |
The <td> tag supports the Global Attributes and the Event Attributes.
How to style tag?
Common properties to alter the visual weight/emphasis/size of text in <td> tag:
- CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit.
- CSS font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
- CSS font-size property sets the size of the font.
- CSS font-weight property defines whether the font should be bold or thick.
- CSS text-transform property controls text case and capitalization.
- CSS text-decoration property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style.
Coloring text in <td> tag:
- CSS color property describes the color of the text content and text decorations.
- CSS background-color property sets the background color of an element.
Text layout styles for <td> tag:
- CSS text-indent property specifies the indentation of the first line in a text block.
- CSS text-overflow property specifies how overflowed content that is not displayed should be signalled to the user.
- CSS white-space property specifies how white-space inside an element is handled.
- CSS word-break property specifies where the lines should be broken.
Other properties worth looking at for <td> tag:
Теги таблицы
CAPTION предназначен для создания заголовка к таблице. Такой заголовок представляет собой текст, отображаемый перед таблицей и описывающий ее содержание.
COL задает ширину и другие атрибуты одной или нескольких колонок таблицы. При наличии этого тега браузер начинает показывать содержимое таблицы, не дожидаясь ее полной загрузки.
COLGROUP предназначен для задания ширины и стиля одной или нескольких колонок таблицы.
TABLE служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов TR и TD.
TBODY предназначен для хранения одной или нескольких строк таблицы. Это позволяет создавать структурные блоки, к которым можно применять единое оформление через стили.
TD Предназначен для создания одной ячейки таблицы. Тег TD должен размещаться внутри контейнера TR, который в свою очередь располагается внутри тега TABLE.
TFOOT предназначен для хранения одной или нескольких строк, которые представлены внизу таблицы.
TH предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру.
THEAD предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы.
TR служит контейнером для создания строки таблицы.
Атрибуты
- abbrУстарел в HTML5
- Определяет сокращенный вариант содержания в ячейке данных, либо выступает в роли альтернативного текста. Применение атрибута не отображается в браузере, но может быть использовано, например, для чтения с экрана или в работе скриптов.
- alignУстарел в HTML5
- Указывает выравнивание содержимого ячейки по горизонтали:left — выравнивание содержимого ячейки по левому краюcenter — выравнивание по центруright — выравнивание по правому краюjustify — выравнивание по ширине (одновременно по правому и левому краю)char — выравнивание по указанному символу
- axisУстарел в HTML5
- Группирует ячейки связанные между собой похожей информацией.
- backgroundУстарел в HTML5
- Задаёт фоновый рисунок в ячейке.
- bgcolorУстарел в HTML5
- Назначает цвет фона ячейки.
- bordercolorУстарел в HTML5
- Устанавливает цвет рамки.
- charУстарел в HTML5
- Выравнивает содержимое ячейки по заданному символу.
Пример: <td char=»c» align=»char»>…</td> - charoffУстарел в HTML5
- Задает смещение содержимого ячейки относительно заданного символа.
- colspan
- Указывает положительное целое число, определяющее сколько столбцов будет охватывать ячейка (по горизонтали). Значение по умолчанию ‒ 1.
- headers
- Указывает id одной или нескольких заголовочных ячеек (HTML тег <th>), связанных с данной ячейкой данных. Применение атрибута не отображается в браузере, но может быть использовано, например, для чтения с экрана или в работе скриптов.
- heightУстарел в HTML5
- Устанавливает высоту ячейки данных.
- nowrapУстарел в HTML5
- Запрещает перенос строк.
- rowspan
- Объединяет вертикальные ячейки.
- scopeУстарел в HTML5
- Определяет связь ячейки простой таблицы с заголовками в речевых браузерах:col — ячейка заголовка установлена для колонкиcolgroup — ячейка заголовка установлена для группы колонокrow — ячейка заголовка задана для строкиrowgroup — ячейка заголовка установлена для группы строк
- valignУстарел в HTML5
- Назначает выравнивание содержимого ячейки по вертикали:top — выравнивание содержимого ячейки по верхнему краю строкиmiddle — выравнивание по серединеbottom — выравнивание по нижнему краюbaseline — выравнивание по базовой линии, при этом происходит привязка содержимого ячейки к одной линии
- widthУстарел в HTML5
- Определяет ширину ячейки данных. Используйте вместо него CSS свойство width.
Для этого элемента доступны глобальные атрибуты и события.
Параметр WIDTH
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Описание
Задает ширину ячейки. Если общая ширина содержимого превышает указанную ширину
ячейки, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования
текста. В случае, когда это невозможно, например, в ячейке находятся изображения,
параметр width будет проигнорирован, и новая ширина
ячейки будет вычислена на основе ее содержимого.
Аналог CSS
width
Пример 11. Ширина ячеек
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Тег TD, параметр width</title>
</head>
<body>
<table cellpadding=»10″ border=»1″>
<tr>
<td width=»20%»> … </td>
<td width=»80%»> … </td>
</tr>
</table>
</body>
</html>
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>
Параметр HEIGHT
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Описание
Браузер сам устанавливает высоту таблицы и ее ячеек исходя из их содержимого.
Однако при использовании параметра height высота
ячеек будет изменена. Здесь возможны два варианта. Если значение height
меньше, чем содержимое ячейки, то этот параметр будет проигнорирован. В случае,
когда установлена высота ячейки, превышающая ее содержимое, добавляется пустое
пространство по вертикали.
Аналог CSS
height
Пример 7. Высота ячейки
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Тег TD, параметр height</title>
</head>
<body>
<table cellpadding=»10″ bgcolor=»#ffcc00″ align=»center»
width=»100%»>
<tr>
<td height=»50″> … </td>
</tr>
</table>
</body>
</html>
Параметр VALIGN
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Описание
Устанавливает вертикальное выравнивание содержимого ячейки. По умолчанию контент
ячейки располагается по ее вертикали в центре.
Аргументы
- top
- Выравнивание содержимого ячейки по верхнему краю строки.
- middle
- Выравнивание по середине.
- bottom
- Выравнивание по нижнему краю.
- baseline
- Выравнивание по базовой линии, при этом происходит привязка содержимого
ячейки к одной линии.
Аналог CSS
vertical-align
Пример 10. Выравнивание в ячейке
<!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>Тег TD, параметр valign</title>
</head>
<body>
<table width=»60%» border=»1″>
<tr>
<td valign=»top»> … </td>
<td valign=»bottom»> … </td>
</tr>
</table>
</body>
</html>
HTML References
HTML by AlphabetHTML by CategoryHTML Browser SupportHTML AttributesHTML Global AttributesHTML EventsHTML ColorsHTML CanvasHTML Audio/VideoHTML Character SetsHTML DoctypesHTML URL EncodeHTML Language CodesHTML Country CodesHTTP MessagesHTTP MethodsPX to EM ConverterKeyboard Shortcuts
HTML Tags
<!—>
<!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>
More Examples
How to align content inside <td> (with CSS):
<table style=»width:100%»> <tr>
<th>Month</th> <th>Savings</th> </tr>
<tr> <td>January</td> <td
style=»text-align:right»>$100</td> </tr> <tr>
<td>February</td> <td
style=»text-align:right»>$80</td> </tr></table>
How to add background-color to table cell (with CSS):
<table> <tr> <th>Month</th>
<th>Savings</th> </tr> <tr> <td
style=»background-color:#FF0000″>January</td> <td
style=»background-color:#00FF00″>$100</td> </tr> </table>
How to set the height of a table cell (with CSS):
<table> <tr> <th>Month</th>
<th>Savings</th> </tr> <tr> <td
style=»height:100px»>January</td> <td
style=»height:100px»>$100</td> </tr></table>
How to specify no word-wrapping in table cell (with CSS):
<table> <tr> <th>Poem</th> </tr> <tr> <td
style=»white-space:nowrap»>Never increase, beyond what is necessary, the
number of entities required to explain anything</td> </tr></table>
How to vertical align content inside <td> (with CSS):
<table style=»width:50%;»> <tr>
<th>Month</th> <th>Savings</th> </tr>
<tr style=»height:100px»> <td
style=»vertical-align:bottom»>January</td> <td
style=»vertical-align:bottom»>$100</td> </tr></table>
How to set the width of a table cell (with CSS):
<table style=»width:100%»> <tr>
<th>Month</th> <th>Savings</th> </tr>
<tr> <td style=»width:70%»>January</td>
<td style=»width:30%»>$100</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>
Атрибуты и свойства тега
К открывающему тегу <table> можно прописывать различные атрибуты.
1. Свойство align=»параметр» — задает выравнивание таблицы. Может принимать следующие значения:
![Тег td [сообщество преподавателей информатики фмш]](https://rwvt.ru/wp-content/uploads/a/7/3/a73b53062874d395d15e59ad49fcd5e8.png)
- left — выравнивание по левому краю
- center — выравнивание по центру
- right — выравнивание по правому краю
В разобранном выше примере мы выравнивали таблицу по центру align=»center».
Этот атрибут можно применять не только к таблице, но и к отдельным ячейкам таблицы <td> или строкам <tr>. Таким образом, в разных ячейках выравнивание будет разное.
Например
2. Свойство background=»URL» — задает фоновой рисунок. Вместо URL должен быть написан адрес фонового изображения.
Пример
Преобразуется на странице в следующее:
| Пример таблицы | |
| Столбец 1 | Столбец 2 |
В рассмотренном примере наше фоновое изображение находится в папке img (которая находится в той же директории, что и html-страница), а называется изображение fon.gif
Обратите внимание на то, что в теге мы добавили style=»color:white;». Поскольку фон почти черный, то для того, чтобы текст не слился с фоном, мы сделали текст белым
Более подробно про фон читайте в статье: как сделать фон для сайта
3. Свойство bgcolor=»цвет» — задает цвет фона таблицы. В качестве цвета можно выбрать любой из всей палитры (см. коды и названия html цветов)
4. Свойство border=»число» — задает толщину рамки таблицы. В предыдущих примерах мы указывали border=»1″, что означает толщина рамки — 1 пиксель.
5. Свойство bordercolor=»цвет» — задает цвет рамки. Если border=»0″, то рамки не будет и цвет рамки не будет иметь смысла.
6. Свойство cellpadding=»число» — отступ от рамки до содержимого ячейки в пикселях.
7. Свойство cellspacing=»число» — расстояние между ячейками в пикселях.
8. Свойство cols=»число» — число столбцов. Если его не задать, то браузер сам определит число столбцов. Разница лишь в том, что указание этого параметра, скорее всего, ускорит загрузку таблицы.
9. Свойство frame=»параметр» — как отображать границы вокруг таблицы. Может принимать следующие значения:
- void — не отрисовывать границы
- border — граница вокруг таблицы
- above — граница по верхнему краю таблицы
- below — граница снизу таблицы
- hsides — добавить только горизонтальные границы (сверху и снизу таблицы)
- vsides — рисовать только вертикальные границы (слева и справа от таблицы)
- rhs — граница только на правой стороне таблицы
- lhs — граница только на левой стороне таблицы
10. Свойство height=»число» — задает высоту таблицы: либо в пикселях, либо в процентах.
11. Свойство rules=»параметр» — где отображать границы между ячейками. Может принимать следующие значения:
- all — линия рисуется вокруг каждой ячейки таблицы
- groups — линия отображается между группами, которые образуются тегами <thead>, <tfoot>, <tbody>, <colgroup> или <col>
- cols — линия отображается между колонками
- none — все границы скрываются
- rows — граница рисуется между строками таблицы, созданными через тег <tr>
12. Свойство width=»число» — задает ширину таблицы: либо в пикселях, либо в процентах.
13. Свойство class=»имя_класса» — можно указать имя класса, которому принадлежит таблица.
14. Свойство style=»стили» — стили можно задать индивидуально для каждой таблицы.
Теперь настало время погрузиться внутрь таблицы и рассмотреть атрибуты ячеек таблицы. Эти атрибуты надо писать в открывающем теге <td>.
Параметр BACKGROUND
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Описание
Определяет изображение, которое будет использоваться в качестве фонового рисунка
ячейки таблицы. В отличие от обычных изображений, для фона не устанавливаются
ширина и высота, и он всегда отображается в натуральную величину с масштабом
100%. Если рисунок по размеру меньше ширины или высоты ячейки, то картинка повторяется
по горизонтали вправо и вниз, выстраиваясь, как мозаика. По этой причине на
месте стыка фоновых картинок могут возникнуть видимые перепады, заметные для
посетителей сайта. При выборе фонового рисунка убедитесь, что обеспечен достаточный
контраст между ним и содержимым ячейки
В качестве фона допускается использовать
анимированные изображения в формате GIF, но они отвлекают внимание читателей
Аналог CSS
background-image
Пример 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>Тег TD, параметр background</title>
</head>
<body>
<table width=»600″>
<tr>
<td background=»/images/rules.gif»>
… </td>
</tr>
</table>
</body>
</html>
Параметр ALIGN
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Аргументы
- left
- Выравнивание содержимого ячейки по левому краю.
- center
- Выравнивание по центру.
- right
- Выравнивание по правому краю.
- justify
- Выравнивание по ширине (одновременно по правому и левому краю).
Аналог CSS
text-align
Пример 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>Тег TD, параметр align</title>
</head>
<body>
<table width=»600″ border=»1″>
<tr>
<td align=»center»> … </td>
<td align=»center»> … </td>
</tr>
</table>
</body>
</html>
Параметр BGCOLOR
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Аргументы
Значение цвета можно задавать двумя способами.
2. По шестнадцатеричному значению
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная
система, в отличие от десятичной системы, базируется, как следует из ее названия,
на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D,
E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной
системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной
системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало
путаницы в определении системы счисления, перед шестнадцатеричным числом ставят
символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый
и синий — может принимать значения от 00 до FF. Таким образом, обозначение
цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают
красную компоненту цвета, два средних — зеленую, а два последних —
синюю.
background-color
Пример 4. Цвет фона ячейки
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Тег TD, параметр bgcolor</title>
</head>
<body text=»white»>
<table bgcolor=»black» width=»600″>
<tr>
<td bgcolor=»#ffcc00″> … </td>
</tr>
<tr>
<td> … </td>
</tr>
</table>
</body>
</html>
Параметр COLSPAN
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Описание
Устанавливает число ячеек, которые должны быть объединены по горизонтали.
Этот параметр имеет смысл для таблиц, состоящих из нескольких строк. Например,
как для таблицы, показанной на рис. 1.
| ячейка 1 | |
| ячейка 2 | ячейка 3 |
Рис. 1. Пример таблицы, где используется горизонтальное объединение ячеек
В приведенной на рис.1 таблице содержатся две строки и две колонки, причем
верхние горизонтальные ячейки объединены с помощью параметра colspan.
Значение по умолчанию
1
Пример 6. Объединение ячеек
<!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>Тег TD, параметр colspan</title>
</head>
<body>
<table width=»200″ border=»1″ cellpadding=»4″ cellspacing=»0″>
<tr>
<td colspan=»2″>ячейка 1</td>
</tr>
<tr>
<td>ячейка 2</td>
<td>ячейка 3</td>
</tr>
</table>
</body>
</html>
Related Resources
- How to Add Border to HTML Table
- How to Set Cellpadding and Cellspacing in CSS
- How to Remove Cellspacing from Tables Using CSS
- How to Add Space Between Rows in the Table
- How to Vertically Center a <div>
- How to Center the Text in the HTML Table Row
- How to Select the First and Last <td> in a Row with CSS
- How to Add Multiple <tbody> Elements in the Same Table
- How to Create an HTML Table with a Fixed Left Column and Scrollable Body
- How to Set the Width of the Table Column
- How to Create a New DOM Element from HTML String
- How to Add a Border-Bottom to the Table Row
- How To Make CSS Ellipsis Work on a Table Cell
- How to Wrap the Content of a Table Cell
- How to Make the CSS overflow: hidden Work on a <td> Element
- How to Vertically Center Inline (Inline-Block) Elements
Параметр ROWSPAN
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Описание
Устанавливает число ячеек, которые должны быть объединены по вертикали. Этот
параметр имеет смысл для таблиц, состоящих из нескольких строк. Например, как
для таблицы, показанной на рис. 2.
| ячейка 1 | ячейка 2 |
| ячейка 3 |
Рис. 2. Пример таблицы, где используется вертикальное объединение ячеек
В приведенной на рис. 2 таблице содержатся две строки и две колонки, причем
левые вертикальные ячейки объединены с помощью параметра rowspan.
Значение по умолчанию
1
Пример 9. Объединение ячеек
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Тег TD, параметр rowspan</title>
</head>
<body>
<table width=»200″ border=»1″ align=»center»
cellpadding=»4″ cellspacing=»0″>
<tr>
<td rowspan=»2″ bgcolor=»#FBF0DB»>ячейка
1</td>
<td>ячейка 2</td>
</tr>
<tr>
<td>ячейка 3</td>
</tr>
</table>
</body>
</html>
Параметр BORDERCOLOR
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Описание
Устанавливает цвет рамки вокруг ячейки. Рамка показывается, когда установлен
параметр border с ненулевым значением у тега <TABLE>.
Значение по умолчанию
Зависит от браузера и операционной системы.
Пример 5. Цвет рамки
<!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>Тег TD, параметр bordercolor</title>
</head>
<body>
<table border=»1″ width=»100%»>
<tr>
<td bordercolor=»red»> … </td>
<td> … </td>
</tr>
</table>
</body>
</html>
Еще примеры
Как выровнять таблицу по правому краю (с помощью CSS):
<table style=»float:right»> <tr>
<th>Месяц</th> <th>Экономия</th> </tr>
<tr> <td>Январь</td>
<td>$100</td> </tr> <tr>
<td>Февраль</td> <td>$80</td> </tr>
</table>
Как добавить цвет фона в таблицу (с помощью CSS):
<table style=»background-color:#00FF00″> <tr>
<th>Месяц</th> <th>Экономия</th> </tr>
<tr> <td>Январь</td>
<td>$100</td> </tr> <tr>
<td>Февраль</td> <td>$80</td> </tr>
</table>
Как установить высоту ячейки таблицы (с помощью CSS):
<table> <tr> <th>Месяц</th>
<th>Экономия</th> </tr> <tr> <td
style=»height:100px»>Январь</td> <td
style=»height:100px»>$100</td> </tr></table>
Как указать отсутствие переноса слов в ячейке таблицы (с помощью CSS):
<table> <tr> <th>Стих</th> </tr>
<tr> <td style=»white-space:nowrap»>Никогда не приувеличивайте,
сверх того, что необходимо, количество сущностей, необходимых для объяснения чего-либо</td> </tr></table>
Как выровнять содержимое по вертикали внутри <td> (с помощью CSS):
<table style=»width:50%;»> <tr>
<th>Месяц</th> <th>Экономия</th> </tr>
<tr style=»height:100px»> <td
style=»vertical-align:bottom»>Январь</td> <td
style=»vertical-align:bottom»>$100</td> </tr></table>
Как установить ширину таблицы (с помощью CSS):
<table style=»width:400px»> <tr>
<th>Месяц</th> <th>Экономия</th> </tr>
<tr> <td>Январь</td>
<td>$100</td> </tr> <tr>
<td>Февраль</td> <td>$80</td> </tr>
</table>
Как создать заголовки таблицы:
Как создать таблицу с подписью:
<table>
<caption>Ежемесячные сбережения</caption> <tr>
<th>Месяц</th> <th>Экономия</th> </tr>
<tr> <td>Январь</td>
<td>$100</td> </tr> <tr>
<td>Февраль</td> <td>$80</td> </tr>
</table>
Параметр NOWRAP
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Описание
Добавление параметра nowrap к тегу <TD>
заставляет текст внутри ячейки отображаться без переносов, одной сплошной строкой.
Неправильное использование этого атрибута может привести к тому, что таблица
будет слишком широкой и не поместится целиком на веб-страницу. Как следствие,
появится горизонтальная полоса прокрутки. В любом случае, пользоваться подобной
таблицей будет неудобно, из-за чего применение параметра nowrap
осуждается в спецификации HTML 4.
Аналог CSS
white-space
Пример 8. Использование параметра nowrap
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Тег TD, параметр nowrap</title>
</head>
<body>
<table width=»400″>
<tr>
<td nowrap> … </td>
</tr>
</table>
</body>
</html>
Значение и применение
Таблицы помогают нам систематизировать определённые данные в строки и столбцы. Они могут содержать в себе различную информацию, например, такую как текст, изображения, нумерованные и маркированные списки и т.п.
Основное содержимое таблицы заключается в тег <table>..</table>.
Каждая строка таблицы помещается в элемент <tr>…</tr>.
Ячейка заголовка таблицы помещается в элемент <th>…</th> (при этом содержимое отображается жирным начертанием и выравнивается по центру).
Каждая ячейка данных таблицы помещается в элемент <td>…</td>.
Наименование таблицы, если оно требуется размещается внутри элемента
…
(необязательный элемент)Обращаю Ваше внимание, что если Вы планируете использовать данный элемент в своей таблице, то он должен следовать в документе сразу за элементом