Содержание

HTML и CSS с примерами кода

Тег <td> (от англ. table data — данные таблицы) предназначен для создания одной ячейки таблицы.

Элемент <td> должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри <table>.

Таблицы

Синтаксис

<table>
  <tr>
    <td>...</td>
  </tr>
</table>

Закрывающий тег не обязателен.

Атрибуты

colspan
Объединяет горизонтальные ячейки.
headers
Позволяет связать ячейки с заголовком.
rowspan
Объединяет вертикальные ячейки.

Для этого элемента доступны универсальные атрибуты.

colspan

Устанавливает число ячеек, которые должны быть объединены по горизонтали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких строк.

Синтаксис

<td colspan="<число>">...</td>

Значения

Любое целое положительное число. Значение 0 распространяет ячейку на всю родительскую группу колонок, объединённую элементом <colgroup>. Значения выше 1000 считаются неправильными и устанавливаются в 1.

Значение по умолчанию

1

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

Для связывания ячеек между собой одной ячейке в элементе <td> или <th> задаётся атрибут id, а второй ячейке — атрибут headers со значением, совпадающим со значением id.

Синтаксис

<td>. ..</td>
<td headers="<идентификатор>">...</td>

Значения

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

Значение по умолчанию

Нет.

rowspan

Устанавливает число ячеек, которые должны быть объединены по вертикали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких строк.

Синтаксис

<td rowspan="<число>">...</td>

Значения

Любое целое положительное число. Если значение установлено как 0, то ячейки объединяются до конца раздела таблицы (<thead>, <tbody> или <tfoot>) или самой таблицы. Максимально допустимое значение равно 65534.

Значение по умолчанию

1

Спецификации

Описание и примеры

<html>
  <head>
    <meta
      http-equiv="Content-Type"
      content="text/html; charset=utf-8"
    />
    <title>TD</title>
  </head>
  <body>
    <table border="1" cellpadding="7" cellspacing="0">
      <tr>
        <td colspan="2" bgcolor="#D3EDF6" align="center">
          Ячейка 1
        </td>
      </tr>
      <tr>
        <td valign="top" align="center">Ячейка 2</td>
        <td valign="top">Ячейка 3</td>
      </tr>
    </table>
  </body>
</html>

Ссылки

  • Тег <td> MDN (рус.
    )

HTML тег td

Тег <td> определяет стандартную ячейку HTML таблицы.

В HTML таблице может быть два вида ячеек:

  • Заголовочная ячейка – содержит информацию для верхнего колонтитула таблицы (создается при помощи элемента <th>)
  • Стандартные ячейка – содержит табличные данные (создается при помощи элемента <td>)

По умолчанию, текст в элементе <th> отображается жирным шрифтом и выравненным по центру.

По умолчанию, текст в элементе <td> отображается обычным шрифтом и выравненным по левому краю.

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

Разница между HTML 4.01 и HTML5

В HTML5 все репрезентативные атрибуты не поддерживаются.

Атрибуты тега <td>

АтрибутОписание
abbrОпределяет краткое описание содержимого ячейки
alignОпределяет горизонтальное выравнивание содержимого элемента
axisОпределяет категории для содержимого ячеек
bgcolorОпределяет фоновый цвет элемента
char
Определяет символ выравнивания содержимого ячейки
charoffОпределяет количество символов смещения
colspanОпределяет количество объединяемых ячеек по горизонтали
headersСвязывает ячейки таблицы с заголовками
heightОпределяет высоту ячейки
nowrapЗапрещает перенос на новую строку содержимого ячейки
rowspan
Определяет количество объединяемых ячеек по вертикали
scopeОпределяет способ связывания ячейки данных таблицы с заголовками
valignОпределяет вертикальное выравнивание содержимого ячейки
widthОпределяет ширину ячейки

Общие атрибуты

Тег <td> поддерживает общие атрибуты и атрибуты-события.

CSS стили по умолчанию

Большинство браузеров будут отображать тег <td> со следующими стилями


td {
    display: table-cell;
    vertical-align: inherit;
}

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

Простая HTML таблица с двумя ячейками:


<table>
  <tr>
    <td>Ячейка A</td>
    <td>Ячейка B</td>
  </tr>
</table>

Тег td



Пример

Простая таблица HTML с двумя ячейками таблицы:

<table>
  <tr>
    <td>Cell A</td>
    <td>Cell B</td>
  </tr>
</table>

Подробнее примеры ниже.


Определение и использование

Тег <td> определяет стандартную ячейку в таблице HTML.

Таблица HTML имеет два типа ячеек:

  • Header cells — содержит сведения о заголовке (созданные с помощью <th> элемента)
  • Standard cells — содержит данные (созданные с помощью <td> элемента)

Текст в <th> элементах выделен полужирным шрифтом и по умолчанию по центру.

Текст в элементах <td> является обычным и выровнен по левому краю по умолчанию.


Поддержка браузера

Элемент
<td> Да Да Да Да Да

Советы и примечания

Совет: Используйте атрибут COLSPAN и RowSpan, чтобы позволить содержимому охватывать несколько столбцов или строк!



Различия между HTML 4,01 и HTML5

Все атрибуты макета удаляются в HTML5.


Атрибуты

Атрибут Значение Описание
abbr text Не поддерживается в HTML5.
Указывает сокращенную версию содержимого в ячейке
align left
right
center
justify
char
Не поддерживается в HTML5.
Выравнивание содержимого в ячейке
axis category_name Не поддерживается в HTML5.
Классифицирует ячейки
bgcolor rgb(x,x,x)
#xxxxxx
colorname
Не поддерживается в HTML5.
Задает цвет фона ячейки
char character Не поддерживается в HTML5.
Выравнивание содержимого ячейки по символу
charoff number  Не поддерживается в HTML5.
Задает количество символов, которое будет выровнено по отношению к символу, указанному атрибутом char
colspan number Указывает число столбцов, которые должна охватывать ячейка
headers header_id Указывает одну или несколько ячеек заголовка, связанных с ячейкой
height pixels
%
Не поддерживается в HTML5.
Задает высоту ячейки
nowrap nowrap Не поддерживается в HTML5.
Указывает, что содержимое внутри ячейки не должно обтекать
rowspan number Задает число строк, которые должна охватывать ячейка
scope col
colgroup
row
rowgroup
Не поддерживается в HTML5.
Определяет способ связывания ячеек заголовков и ячеек данных в таблице
valign
top
middle
bottom
baseline
Не поддерживается в HTML5.
Выравнивание содержимого ячейки по вертикали
width pixels
%
Не поддерживается в HTML5.
Задает ширину ячейки

Глобальные атрибуты

Тег <td> также поддерживает Глобальные атрибуты в HTML.


Атрибуты события

Тег <td> также поддерживает Атрибуты событий в HTML.


Попробуйте примеры

Заголовки таблиц
Создание заголовков таблиц.

Таблица с подписью
Таблица HTML с подписью.

TАЗС внутри таблицы
Отображение элементов внутри других элементов.

Cлоктя, которые охватывают более одной строки/столбца
Определение ячеек таблицы, охватывающих более одной строки или одного столбца.


Похожие страницы

HTML Учебник: HTML Tables

HTML DOM reference: TableData Object

CSS Учебник: Styling Tables


Параметры CSS по умолчанию

В большинстве обозревателей элемент <td> будет отображаться со следующими значениями по умолчанию:

td {
    display: table-cell;
    vertical-align: inherit;
}

Тег | HTML справочник

HTML теги

Значение и применение

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

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

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

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

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

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

Наименование таблицы, если оно требуется размещается внутри элемента <caption>…</caption> (необязательный элемент). Обращаю Ваше внимание, что если Вы планируете использовать данный элемент в своей таблице, то он должен следовать в документе сразу за элементом <table>. По умолчанию наименование таблицы размещается по центру вверху таблицы (расположение заголовка таблицы возможно изменить, используя CSS свойство caption-side).

Поддержка браузерами

Атрибуты

АтрибутЗначениеОписание
abbrtextНе поддерживается в HTML5.
Определяет сокращенный вариант содержания в ячейке данных, либо выступает в роли альтернативного текста. Применение атрибута не отображается в браузере, но может быть использовано, например, для чтения с экрана или в работе скриптов.
alignright
left
center
justify
char
Не поддерживается в HTML5.
Выравнивает содержимое ячейки данных таблицы.
axiscategory_nameНе поддерживается в HTML5.
Назначение категории ячейки данных.
bgcolorrgb(x,x,x)
#xxxxxx
colorname
Не поддерживается в HTML5.
Задает цвет фона для ячейки данных таблицы.
charcharacterНе поддерживается в HTML5.
Выравнивает содержимое в ячейке данных таблицы по заданному символу. Атрибут char может быть использован только если атрибут align = «char».
charoffnumberНе поддерживается в HTML5.
Атрибут, который позволяет произвести выравнивание в ячейке данных с символа, указанного в атрибуте, путем смещения от определённого символа вправо (положительные значения) или влево (отрицательные значения). Атрибут charoff может быть использован только если атрибут align = «char».
colspannumberОпределяет количество столбцов, которое ячейка данных должна охватывать. Значение атрибута должно быть неотрицательном целым числом. Не рекомендуется использовать значения свыше 1000, т.к. они могут быть обрезаны до этого числа. Значение по умолчанию 1.
headersheader_idУказывает id одной или нескольких заголовочных ячеек (HTML тег <th>), связанных с данной ячейкой данных. Применение атрибута не отображается в браузере, но может быть использовано, например, для чтения с экрана или в работе скриптов.
heightpixels
%
Не поддерживается в HTML5.
Устанавливает высоту ячейки данных.
nowrapnowrapНе поддерживается в HTML5.
Указывает, что содержание в ячейке данных не должно переноситься.
rowspannumberОпределяет количество строк, которые ячейка данных должна охватывать. Значение атрибута должно быть неотрицательном целым числом. Не рекомендуется использовать значения свыше 65534, т.к. они могут быть обрезаны до этого числа. Значение по умолчанию 1.
scopecol
colgroup
row
rowgroup
Не поддерживается в HTML5.
Определяет способ связать заголовочную ячейку (HTML тег <th>) с ячейками данных в таблице. Применение атрибута не отображается в браузере, но может быть использовано, например, для чтения с экрана или в работе скриптов.
valigntop
middle
bottom
baseline
Не поддерживается в HTML5.
Вертикальное выравнивание содержимого в ячейке данных.
widthpixels
%
Не поддерживается в HTML5.
Определяет ширину ячейки данных.

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

<!DOCTYPE html>
<html>
<head>
<title>Пример использования тега <td></title>
</head>
<body>
	<table border = "1"> <!--начало содержимого таблицы-->
		<caption>Элементарная таблица</caption> <!-- наименование таблицы-->
		<tr> <!--описываем первую строку-->
			<th>Ячейка заголовка 1</th>
			<th>Ячейка заголовка 2</th> 
			<th>Ячейка заголовка 3</th>
		</tr> 
		<tr> <!--описываем вторую строку-->
			<td>Ячейка данных 1 Строка 2</td>
			<td>Ячейка данных 2 Строка 2</td>
			<td>Ячейка данных 3 Строка 2</td>
		</tr>
		<tr> <!-- описываем третью строку-->
			<td>Ячейка данных 1 Строка 3</td>
			<td>Ячейка данных 2 Строка 3</td>
			<td>Ячейка данных 3 Строка 3</td>
		</tr>
	</table> <!-- конец таблицы-->
</body>
</html>

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<title>Пример использования атрибута colspan HTML тега <td></title>
</head>
<body>
	<table border = "1">
		<tr>
			<th >Ячейка заголовка 1</th>
			<th >Ячейка заголовка 2</th>
			<th >Ячейка заголовка 3</th>
		</tr>
		<tr>
			<td>Ячейка данных 1 Строка 2</td>
			<td>Ячейка данных 2 Строка 2</td>
			<td>Ячейка данных 3 Строка 2</td>
		</tr>
		<tr>
			<td colspan = "2">Ячейка 1 Строка 3 (colspan="2")</td>
			<td>Ячейка 2 Строка 3</td>
		</tr>
	</table>
</body>
</html>

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<title>Пример объединения строк в таблице</title>
</head>
<body>
	<table border = "1"> <!-- начало содержимого таблицы-->
		<caption>Элементарная таблица</caption> <!--наименование таблицы-->
		<tr> <!--описываем первую строку-->
			<th colspan = "2">Ячейка заголовка 1</th><!--растягиваем на 2 ячейки-->
			<th>Ячейка заголовка 2</th>
		</tr>
		<tr><!--описываем вторую строку-->
			<td rowspan = "2">Ячейка данных 1 Строка 2</td>
			<td>Ячейка данных 2 Строка 2</td>
			<td>Ячейка данных 2 Строка 3</td>
		</tr>
		<tr> <!--описываем третью строку (первая ячейка занята предыдущей строкой) -->
			<td>Ячейка данных 2 Строка 3</td>
			<td>Ячейка данных 3 Строка 3</td>
		</tr>
	</table> <!--конец таблицы-->
</body>
</html>
Пример таблицы с объединёнными столбцами и строками на HTML.

Отличия HTML 4.01 от HTML 5

В HTML 5 была прекращена поддержка 11 атрибутов.

Значение CSS по умолчанию

td {
display: table-cell;
vertical-align: inherit;
}

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

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

Элемент поддерживает «атрибуты событий».

HTML теги

Таблицы (table, tr, td, th) в HTML

В статье будут рассмотрены несколько вопросов: как сделать HTML таблицу, как добавить строку и ячейку в таблицу, как объединить строки или ячейки в таблице.

Для создания таблицы необходимо использовать тег <table>. Внутри таблицы для создания строк используется тег <tr>, для столбцов — <td>. В итоге, HTML код таблиц выглядит примерно так:

<table border="1" cellspacing="1" cellpadding="1">
   <tr>
      <td>Ячейка 1</td>
      <td>Ячейка 2</td>
      <td>Ячейка 3</td>
   </tr>
   <tr>
      <td>Ячейка 4</td>
      <td>Ячейка 5</td>
      <td>Ячейка 6</td>
   </tr>
   <tr>
      <td>Ячейка 7</td>
      <td>Ячейка 8</td>
      <td>Ячейка 9</td>
   </tr>
</table>
Код из этого примера отобразит на странице следующую стаблицу:
Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8 Ячейка 9

Довольно часто для задания первых строчек таблицы используется не <td>. ..</td>, а <th>…</th>. В таком случае весь текст в ячейках первой строчки таблицы будет выделен жирным и выравнен по центру.

Разберём атрибуты, которые указаны в примере таблицы:

cellspacing

cellspacing=»1″ — этот атрибут определят расстояние между ячейками таблицы. Если его поставить, к примеру, равным 10, то таблица будет выглядеть так:
Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8 Ячейка 9

cellpadding

cellpadding=»1″ — значение этого атрибута атрибута задает отступ от текста внутри ячеек таблицы от стенок. Если поставить значение, к примеру, равным 10, то таблица будет выглядеть так:
Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8 Ячейка 9

border

border=»1″ — устанавливает толщину рамки таблицы в пикселях. Если поставить значение, к примеру, равным 10, то таблица будет выглядеть так
Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8 Ячейка 9

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

Высота и ширина таблицы

У тега есть атрибуты, которые задают ширину (width) и высоту (height) таблицы. Значения этих атрибутов задают ширину и высоту в пикселях.

Попробуем задать таблице из примеры ширину в 300 пикселей, с помощью указания атрибута

Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8 Ячейка 9

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

Если задать, то получится такой результат:
Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8 Ячейка 9

Тег TD в HTML таблицах — Таблицы — codebra

Атрибуты для тега <td>

Атрибут abbr

Атрибут abbr применяют для кратного описания ячеек, предназначается для речевых (говорящих) браузеров. Этот текст никак не отображается, но легко поддается скриптам JavaScript. Далее пример:

Код HTML

<table width = "100%" border = "1">
<tr align = "center">
<td abbr = "Ячейка 1">Ячейка 1</td>
<td abbr = "Ячейка 2">Ячейка 2</td>
</tr>
</table>

Атрибут align

Атрибут align задает выравнивание в ячейке. Далее таблица значений и пример:

Таблица взята с сайта htmlbook.ru
left Выравнивание содержимого ячеек по левому краю.
center Выравнивание по центру.
right Выравнивание по правому краю.
justify Выравнивание по ширине (одновременно по правому и левому краю).

Код HTML

<table width = "100%">
<tr>
<td align = "center">Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
</table>

Атрибут background

Атрибут background определяет изображение, которое будет помещено в ячейку. Аналогом в CSS является свойство background-image. Далее пример:

Код HTML

<table width = "100%">
<tr>
<td background = "img/bg.png">Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
</table>

Атрибут bgcolor

Атрибут bgcolor добавляет цвет фона заданной ячейке. В значении должен быть указан цвет фона. Аналогом в CSS является свойство background-color. Далее пример:

Код HTML

<table width = "100%">
<tr>
<td bgcolor = "#000000">Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
</table>

Атрибут colspan

Атрибут colspan применяется для объединения ячеек по горизонтали. Атрибут часто используется, чтобы понять его, рассмотрим пример:

Код HTML

<table width = "100%" border = "2">
<tr>
<td colspan = "3">Строка 1</td>
</tr>
<tr>
<td>Строка 2</td>
<td colspan = "2">Строка 2</td>
</tr>
<tr>
<td>Строка 3</td>
<td>Строка 3</td>
<td>Строка 3</td>
</tr>
</table>

Атрибут height

Атрибут height отвечает за высоту ячейки. Принимает значения в пикселях и процентах. Он осуждается и считается, что лучше использовать CSS, с чем я и согласен. Далее пример:

Код HTML

<table width = "100%" border = "2">
<tr>
<td height = "300px">Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
</table>

Атрибут rowspan

Атрибут rowspan отвечает за объединение ячеек по вертикали. Атрибут полезен для создания сложных таблиц. Далее пример:

Код HTML

<table width = "100%" border = "1">
<tr align = "center">
<td rowspan = "2">Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr align = "center">
<td>Ячейка 3</td>
</tr>
</table>

Атрибут valign

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

Таблица взята с сайта htmlbook. ru
top Выравнивание содержимого ячеек по верхнему краю строки.
middle Выравнивание по середине.
bottom Выравнивание по нижнему краю.
baseline Выравнивание по базовой линии, при этом происходит привязка содержимого ячеек к одной линии.

Код HTML

<table>
<tr>
<td valign = "middle">Привет</td>
<td>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum at egestas orci.
Vivamus vitae pretium neque. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Ut finibus commodo nibh, in accumsan
nulla finibus at. Etiam nec lacus eu turpis volutpat
sodales. Ut pretium dui lacus, non commodo est
malesuada placerat. Nulla bibendum quam elit,
in placerat ex placerat ut. Curabitur non aliquet
massa. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus.
Nam gravida mi quis enim vulputate, sed
convallis magna ultrices. Proin purus enim,
fermentum vel tincidunt id, bibendum eget
felis.
</td>
</tr>
</table>

Атрибут width

Атрибут width отвечает за ширину ячейки. Принимает значения в пикселях и процентах. Он осуждается и считается, что лучше использовать CSS, с чем я и согласен. Далее пример:

Код HTML

<table width = "100%" border = "2">
<tr>
<td width = "100px">Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
</table>

Тег HTML ячейка таблицы

Тег <td> определяет обычную ячейку в HTML таблице. Используется в HTML таблицах определенных тегом <table>.

В HTML таблицах существует 2 типа ячеек: обычные и ячейки-заголовки. Тег <td> указывает на обычные ячейки таблицы HTML. Для определения ячейки-заголовка используйте тег <th>.

HTML тег ячейки <td> ставится внутри тега <tr> — строки таблицы.

Подробнее про создание таблиц читайте в статье: Создание таблиц в HTML. Все о HTML таблицах.

Синтаксис

<td>контент ячейки</td>

Отображение в браузере

Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4

Пример использования <td> в HTML коде

<!DOCTYPE html>
<html>
<head>
<title>Простая таблица на 4 ячейки</title>
</head>
<body>
<table>
<tbody>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</tbody>
</table>
</body>
</html>

Поддержка браузерами

Атрибуты

Атрибут Значения Описание
colspan число Количество ячеек по горизонтали, которые должны быть объединены.
headers id_заголовка Указывает заголовок, к которому относится ячейка.
rowspan число Количество ячеек по вертикали, которые должны быть объединены.
Устаревшие атрибуты
abbr текст Короткая версия содержимого ячейки.
align left
right
center
justify
Задает правило выравнивания содержимого ячейки по горизонтали. В HTML5 используйте CSS.
axis имя_категории Используется для категоризации ячеек. Задает категорию, к которой принадлежит ячейка. В HTML5 используйте классы CSS.
bgcolor rgb
HTML hex
HTML colorname

Фоновый цвет. В HTML5 используйте CSS.

Примеры:
RGB: rgb(236,123,050), rgb(0, 20, 187).
HTML hex: #faf3e1, #ccc.
HTML colorname: white, green;

height пиксели
проценты
Высота ячейки. В HTML5 используйте CSS.
nowrap пусто / nowrap Логический атрибут. Устанавливает запрет переноса в тексте ячейки. В HTML5 используйте CSS.
scope col
colgroup
row
rowgroup
Устанавливает ячейку как заголовок для:
col — колонки; colgroup — группу колонок; row — ряда; rowgroup — группы рядов.
valign top
middle
bottom
baseline
Задает правило выравнивания содержимого ячейки по вертикали. В HTML5 используйте CSS.
width пиксели
проценты
Ширина ячейки. В HTML5 используйте CSS.

HTML td rowspan Атрибут

❮ HTML-тег

Пример

Таблица HTML с ячейкой таблицы, занимающей две строки:
















Месяц Экономия Экономия на праздники!
Январь 100 50 долларов
февраль 80 долларов США

Попробуй сам »

Дополнительные примеры «Попробуйте сами» ниже.


Определение и использование

Атрибут rowspan определяет количество строк, которые должна охватывать ячейка.


Поддержка браузера

Атрибут
пролет между рядами Есть Есть Есть Есть Есть


Синтаксис

Значения атрибутов

Значение Описание
номер Задает количество строк, которое должна охватывать ячейка. Примечание. rowspan = «0» указывает браузеру, что нужно охватить ячейку последней строкой в ​​разделе таблицы (thead, tbody или tfoot). Chrome, Firefox и Opera 12 (и более ранние версии) поддерживают rowspan = «0».

Другие примеры

Пример

Использование rowspan = «0»:




















Месяц Экономия Экономия на праздники!
январь 100 100 долларов
февраль 80 долларов США

Попробуй сам »
❮ HTML-тег

: элемент ячейки данных таблицы — HTML: язык разметки гипертекста

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

., , , даже если оно определено неявно), которому принадлежит ячейка. Значения выше 65534 сокращаются до 65534.

Устаревшие атрибуты

abbr

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

Примечание: Не используйте этот атрибут, поскольку он устарел в последнем стандарте. В качестве альтернативы вы можете поместить сокращенное описание внутри ячейки и поместить длинное содержимое в атрибут title .

выровнять

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

  • слева : содержимое выравнивается по левому краю ячейки.
  • центр : содержимое центрируется в ячейке.
  • справа : содержимое выравнивается по правому краю ячейки.
  • выравнивание (только с текстом): содержимое растягивается внутри ячейки так, чтобы покрывать всю ее ширину.
  • char (только с текстом): содержимое выравнивается по символу внутри элемента
Категории содержимого Разделение корня.
Разрешенное содержание Содержание потока.
Отсутствие тега Начальный тег является обязательным.
Конечный тег может быть опущен, если за ним сразу следует элемент
или или если в его родительском элементе больше нет данных.
Допущенные родители Элемент
Неявная роль ARIA ячейка , если потомок элемента
Разрешенные роли ARIA Любые
Интерфейс DOM HTMLTableCellElement

Этот элемент включает глобальные атрибуты.

диапазон
Этот атрибут содержит неотрицательное целое число, указывающее, на сколько столбцов расширяется ячейка.Его значение по умолчанию — 1 . Значения выше 1000 будут считаться неправильными и будут установлены на значение по умолчанию (1).
Этот атрибут содержит список разделенных пробелами строк, каждая из которых соответствует атрибуту id элементов
, которые применяются к этому элементу.
пролет между рядами
Этот атрибут содержит неотрицательное целое число, указывающее, сколько строк занимает ячейка.Его значение по умолчанию — 1 ; если его значение установлено на 0 , оно продолжается до конца раздела таблицы (
с минимальным смещением.Этот символ определяется атрибутами char и charoff Не реализовано (см. Ошибку 2212).

Значение по умолчанию, когда этот атрибут не указан, — слева .

Примечание:
  • Для достижения того же эффекта, что и для значений left , center , right или с выравниванием значений , примените к элементу свойство text-align CSS.
  • Чтобы добиться того же эффекта, что и значение char , присвойте свойству text-align то же значение, которое вы использовали бы для char .Не реализовано в CSS3.
ось
Этот атрибут содержит список строк, разделенных пробелами. Каждая строка — это id группы ячеек, к которой применяется этот заголовок.
bgcolor

Этот атрибут определяет цвет фона каждой ячейки в столбце. Это шестизначный шестнадцатеричный код RGB с префиксом # . Также можно использовать одно из предопределенных цветовых словечек.

Чтобы добиться аналогичного эффекта, используйте свойство CSS background-color .

символ
Содержимое элемента ячейки выровнено по символу. Типичные значения включают точку (.) Для выравнивания чисел или денежных значений. Если для align не задано значение char , этот атрибут игнорируется.
чугун
Этот атрибут используется для смещения данных столбца вправо от символа, указанного атрибутом char .Его значение определяет продолжительность этого сдвига.
высота
Этот атрибут используется для определения рекомендуемой высоты ячейки. Вместо этого используйте свойство CSS height .
объем
Этот перечислимый атрибут определяет ячейки, к которым относится элемент заголовка (определенный в
). Используйте этот атрибут только с элементом , чтобы определить строку или столбец, для которых он является заголовком.
валин
Этот атрибут определяет, как текст выравнивается по вертикали внутри ячейки. Возможные значения этого атрибута:
  • базовая линия : размещает текст рядом с нижней частью ячейки и выравнивает его по базовой линии символов, а не по нижней части. Если символы не опускаются ниже базовой линии, значение базовой линии дает тот же эффект, что и нижний .
  • снизу : размещает текст в нижней части ячейки.
  • по центру : центрирует текст в ячейке.
  • и вверху : размещает текст в верхней части ячейки.

Чтобы добиться аналогичного эффекта, используйте свойство CSS vertical-align .

ширина
Этот атрибут используется для определения рекомендованной ширины ячейки. Вместо этого используйте свойство CSS width .

Таблицы BCD загружаются только в браузере

Таблицы HTML со стилями CSS

Дизайн таблиц CSS

Модель таблицы

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

Простая структура таблицы HTML с 3 строками и 3 столбцами.


Исходный код HTML
Рулон No Имя Команда
1001 Иоанна Красный
1002 Питер Синий
1003 Генри Зеленый

Как установить ширину и высоту таблицы в CSS

Чтобы указать ширину и высоту таблицы, используйте свойства CSS width, height .Здесь ширина таблицы равна 30%, а высота td установлена ​​на 40 пикселей.

Таблица { ширина: 40%; } тд { высота: 40 пикселей; }
вывод

Исходный код
Рулон No Имя Команда
1001 Иоанна Красный
1002 Питер Синий
1003 Генри Зеленый

Как установить ширину столбца таблицы в CSS

Чтобы указать ширину столбца в CSS, используйте свойство width для td.

тд { ширина: 170 пикселей; }
вывод

CSS Высота строки таблицы

Вы можете установить высоту строки с помощью свойства CSS line-height , которое оно устанавливает для каждого tr.

tr { высота строки: 50 пикселей; }

Когда вы устанавливаете это свойство, каждая строка имеет высоту 50 пикселей.


CSS Граница таблицы

Чтобы указать границу таблицы в CSS, используйте свойство CSS border.

таблица, th, td { граница: 2 пикселя сплошного зеленого цвета; }

В приведенном выше коде CSS свойство границы применяется к таблице, заголовку таблицы и каждому TD.


Полный исходный код
Рулон No Имя Команда
1001 Иоанна Красный
1002 Питер Синий
1003 Генри Зеленый

CSS Свернуть границы таблицы

Свойство CSS Collapse принимает два значения: отдельные и свернуть.

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

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

Таблица { граница-коллапс: коллапс; }
вывод

CSS Table Text Align

В CSS можно выровнять текст по горизонтали и вертикали.Для горизонтального выравнивания вы можете использовать свойство CSS text-align, а для вертикального вы можете использовать свойство vertical-align.



тд { выравнивание текста: вправо; вертикальное выравнивание: снизу; }
вывод

CSS Table Cell Padding

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

тд { отступ: 10 пикселей; } th { отступ: 20 пикселей; }
вывод

CSS Table Cell Spacing

Атрибут Cellspacing помещает пространство вокруг каждой ячейки в таблице. Чтобы указать интервал между ячейками в CSS, используйте свойство CSS border-spacing.

таблица, th, td { граница: 2 пикселя сплошного зеленого цвета; интервал границы: 20 пикселей; }
выход

Полный исходный код
Рулон No Имя Команда
1001 Иоанна Красный
1002 Питер Синий
1003 Генри Зеленый

Макет таблицы — Попутный ветер CSS

Авто

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

Название Автор Просмотры
Введение в CSS Адам 858
Длинный и извилистый тур по истории платформ и инструментов пользовательского интерфейса и их влиянию на дизайн Адам 112
Введение в JavaScript Крис 1,280
  <таблица>
  
Заголовок Автор Просмотры
Введение в CSS Адам 858
Длинный и извилистый тур по истории платформ и инструментов пользовательского интерфейса и их влиянию на дизайн Адам 112
Введение в JavaScript Крис 1 280

Фиксированный

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

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

Название Автор Просмотры
Введение в CSS Адам 858
Длинный и извилистый тур по истории платформ и инструментов пользовательского интерфейса и их влиянию на дизайн Адам 112
Введение в JavaScript Крис 1,280
  <таблица>
  
    
       Заголовок 
       Автор 
       Просмотры 
    
  
  
    
       Введение в CSS 
       Адам 
       858 
    
    
       Длинный и извилистый тур по истории платформ и инструментов пользовательского интерфейса и их влиянию на дизайн 
       Адам 
       112 
    
    
       Введение в JavaScript 
       Крис 
       1 280 
    
  
  

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

Вы можете контролировать, какие варианты будут созданы для утилит компоновки таблиц, изменив свойство tableLayout в разделе вариантов файла tailwind.config.js .

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

 
  module.exports = {
    варианты: {
      продлевать: {
        
+ tableLayout: ['зависать', 'фокус'],
      }
    }
  }  

Если вы не планируете использовать утилиты компоновки таблиц в своем проекте, вы можете полностью отключить их, установив для свойства tableLayout значение false в разделе corePlugins вашего файла конфигурации:

 
  модуль.export = {
    corePlugins: {
      
+ tableLayout: ложь,
    }
  }  

Таблицы · Bootstrap

Документация и примеры для выбора стиля таблиц (учитывая их преобладающее использование в плагинах JavaScript) с помощью Bootstrap.

Примеры

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

, а затем расширьте его с помощью пользовательских стилей или наших различных включенных классов модификаторов.

Используя самую простую разметку таблиц, вот как таблицы на основе .table выглядят в Bootstrap. Все стили таблиц наследуются в Bootstrap 4 , что означает, что любые вложенные таблицы будут стилизованы так же, как и родительские.

# Первая Последняя Ручка
1 Марка Отто @mdo
2 Иаков Торнтон @ жир
3 Ларри Птица @twitter
  <таблица>
  
    
       # 
       Первый 
       Последний 
       Дескриптор 
    
  
  
    
       1 
       Отметить 
       Отто 
       @mdo 
    
    
       2 
       Джейкоб 
       Торнтон 
       @fat 
    
    
       3 
       Ларри 
       Птица 
       @twitter 
    
  
  

Вы также можете инвертировать цвета — светлый текст на темном фоне — с помощью . стол-тёмный .

# Первая Последняя Ручка
1 Марка Отто @mdo
2 Иаков Торнтон @ жир
3 Ларри Птица @twitter
  <таблица>
  
    
       # 
       Первый 
       Последний 
       Дескриптор 
    
  
  
    
       1 
       Отметить 
       Отто 
       @mdo 
    
    
       2 
       Джейкоб 
       Торнтон 
       @fat 
    
    
       3 
       Ларри 
       Птица 
       @twitter 
    
  
  

Варианты головок стола

Подобно таблицам и темным таблицам, используйте классы модификаторов . thead-light или .thead-dark , чтобы объекты казались светлыми или темно-серыми.

# Первая Последняя Ручка
1 Марка Отто @mdo
2 Иаков Торнтон @ жир
3 Ларри Птица @twitter
# Первая Последняя Ручка
1 Марка Отто @mdo
2 Иаков Торнтон @ жир
3 Ларри Птица @twitter
  <таблица>
  
    
       # 
       Первый 
       Последний 
       Дескриптор 
    
  
  
    
       1 
       Отметить 
       Отто 
       @mdo 
    
    
       2 
       Джейкоб 
       Торнтон 
       @fat 
    
    
       3 
       Ларри 
       Птица 
       @twitter 
    
  


<таблица>
  
    
       # 
       Первый 
       Последний 
       Дескриптор 
    
  
  
    
       1 
       Отметить 
       Отто 
       @mdo 
    
    
       2 
       Джейкоб 
       Торнтон 
       @fat 
    
    
       3 
       Ларри 
       Птица 
       @twitter 
    
  
  

Полосатые ряды

Используйте . table-striped , чтобы добавить полосатую зебру к любой строке таблицы в пределах .

# Первая Последняя Ручка
1 Марка Отто @mdo
2 Иаков Торнтон @ жир
3 Ларри Птица @twitter
  <таблица>
  
    
       # 
       Первый 
       Последний 
       Дескриптор 
    
  
  
    
       1 
       Отметить 
       Отто 
       @mdo 
    
    
       2 
       Джейкоб 
       Торнтон 
       @fat 
    
    
       3 
       Ларри 
       Птица 
       @twitter 
    
  
  
# Первая Последняя Ручка
1 Марка Отто @mdo
2 Иаков Торнтон @ жир
3 Ларри Птица @twitter
  <таблица>
  
    
       # 
       Первый 
       Последний 
       Дескриптор 
    
  
  
    
       1 
       Отметить 
       Отто 
       @mdo 
    
    
       2 
       Джейкоб 
       Торнтон 
       @fat 
    
    
       3 
       Ларри 
       Птица 
       @twitter 
    
  
  

Стол с бортиком

Добавьте . с границами таблицы для границ со всех сторон таблицы и ячеек.

# Первая Последняя Ручка
1 Марка Отто @mdo
2 Иаков Торнтон @ жир
3 Птица Ларри @twitter
  <таблица>
  
    
       # 
       Первый 
       Последний 
       Дескриптор 
    
  
  
    
       1 
       Отметить 
       Отто 
       @mdo 
    
    
       2 
       Джейкоб 
       Торнтон 
       @fat 
    
    
       3 
       Птица Ларри 
       @twitter 
    
  
  
# Первая Последняя Ручка
1 Марка Отто @mdo
2 Иаков Торнтон @ жир
3 Птица Ларри @twitter
  <таблица>
  
    
       # 
       Первый 
       Последний 
       Дескриптор 
    
  
  
    
       1 
       Отметить 
       Отто 
       @mdo 
    
    
       2 
       Джейкоб 
       Торнтон 
       @fat 
    
    
       3 
       Птица Ларри 
       @twitter 
    
  
  

Подъемные ряды

Добавьте . table-hover , чтобы включить состояние наведения на строки таблицы в пределах .

# Первая Последняя Ручка
1 Марка Отто @mdo
2 Иаков Торнтон @ жир
3 Птица Ларри @twitter
  <таблица>
  
    
       # 
       Первый 
       Последний 
       Дескриптор 
    
  
  
    
       1 
       Отметить 
       Отто 
       @mdo 
    
    
       2 
       Джейкоб 
       Торнтон 
       @fat 
    
    
       3 
       Птица Ларри 
       @twitter 
    
  
  
# Первая Последняя Ручка
1 Марка Отто @mdo
2 Иаков Торнтон @ жир
3 Птица Ларри @twitter
  <таблица>
  
    
       # 
       Первый 
       Последний 
       Дескриптор 
    
  
  
    
       1 
       Отметить 
       Отто 
       @mdo 
    
    
       2 
       Джейкоб 
       Торнтон 
       @fat 
    
    
       3 
       Птица Ларри 
       @twitter 
    
  
  

Столик

Добавьте . table-sm , чтобы сделать столы более компактными, разрезая заполнение ячеек пополам.

# Первая Последняя Ручка
1 Марка Отто @mdo
2 Иаков Торнтон @ жир
3 Птица Ларри @twitter
  <таблица>
  
    
       # 
       Первый 
       Последний 
       Дескриптор 
    
  
  
    
       1 
       Отметить 
       Отто 
       @mdo 
    
    
       2 
       Джейкоб 
       Торнтон 
       @fat 
    
    
       3 
       Птица Ларри 
       @twitter 
    
  
  
# Первая Последняя Ручка
1 Марка Отто @mdo
2 Иаков Торнтон @ жир
3 Птица Ларри @twitter
  <таблица>
  
    
       # 
       Первый 
       Последний 
       Дескриптор 
    
  
  
    
       1 
       Отметить 
       Отто 
       @mdo 
    
    
       2 
       Джейкоб 
       Торнтон 
       @fat 
    
    
       3 
       Птица Ларри 
       @twitter 
    
  
  

Контекстные классы

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

Класс Заголовок Заголовок
Активный Ячейка Ячейка
По умолчанию Ячейка Ячейка
Первичный Ячейка Ячейка
Вторичная Ячейка Ячейка
Успех Ячейка Ячейка
Опасность Ячейка Ячейка
Предупреждение Ячейка Ячейка
Информация Ячейка Ячейка
Свет Ячейка Ячейка
Темный Ячейка Ячейка
  
... 

 ... 
 ... 
 ... 
 ... 
 ... 
 ... 
 ... 
 ... 



   ... 
  
   ... 
   ... 
   ... 
   ... 
   ... 
   ... 
   ... 
   ... 
  

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

# Заголовок Заголовок
1 Ячейка Ячейка
2 Ячейка Ячейка
3 Ячейка Ячейка
4 Ячейка Ячейка
5 Ячейка Ячейка
6 Ячейка Ячейка
7 Ячейка Ячейка
8 Ячейка Ячейка
9 Ячейка Ячейка
  
... 
 ... 
 ... 
 ... 
 ... 



   ... 
   ... 
   ... 
   ... 
   ... 
  
Передача смысла вспомогательным технологиям

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

Создайте адаптивные таблицы, заключив любую .table в оболочку .table-responsive {-sm | -md | -lg | -xl} , заставляя таблицу прокручиваться по горизонтали на каждой максимальной ширине точки останова до (но не включая) 576 пикселей, 768 пикселей, 992 пикселей и 1120 пикселей соответственно.

Обратите внимание, что, поскольку браузеры в настоящее время не поддерживают запросы контекста диапазона, мы обходим ограничения префиксов min- и max- и области просмотра с дробной шириной (что может происходить при определенных условиях, например, на устройствах с высоким разрешением) за счет использования значений с более высокой точностью для этих сравнений.

Подписи

A работает как заголовок таблицы. Это помогает пользователям программ чтения с экрана найти таблицу, понять, о чем она, и решить, хотят ли они ее прочитать.

Список пользователей
# Первая Последняя Ручка
1 Марка Отто @mdo
2 Иаков Торнтон @ жир
3 Ларри Птица @twitter
  <таблица>
   Список пользователей 
  
    
       # 
       Первый 
       Последний 
       Дескриптор 
    
  
  
    
       1 
       Отметить 
       Отто 
       @mdo 
    
    
       2 
       Джейкоб 
       Торнтон 
       @fat 
    
    
       3 
       Ларри 
       Птица 
       @twitter 
    
  
  

Адаптивные таблицы

Адаптивные таблицы позволяют легко прокручивать таблицы по горизонтали.Сделайте любую таблицу отзывчивой во всех окнах просмотра, обернув .table с .table-responsive . Или выберите максимальную точку останова, до которой будет реагировать таблица, используя .table-responsive {-sm | -md | -lg | -xl} .

Вертикальная обрезка / усечение

Адаптивные таблицы используют overflow-y: hidden , который отсекает любое содержимое, выходящее за нижний или верхний края таблицы. В частности, это может вырезать раскрывающиеся меню и другие сторонние виджеты.

Всегда отзывчивый

Для каждой точки останова используйте .table-responsive для горизонтальной прокрутки таблиц.

# Заголовок Заголовок Заголовок Заголовок Заголовок Заголовок Заголовок Заголовок Заголовок
1 Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка
2 Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка
3 Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка
  
<таблица> ...

Зависит от точки останова

Используйте .table-responsive {-sm | -md | -lg | -xl} по мере необходимости, чтобы создать адаптивные таблицы до определенной точки останова. С этой точки останова и выше таблица будет вести себя нормально и не будет прокручиваться по горизонтали.

# Заголовок Заголовок Заголовок Заголовок Заголовок
1 Ячейка Ячейка Ячейка Ячейка Ячейка
2 Ячейка Ячейка Ячейка Ячейка Ячейка
3 Ячейка Ячейка Ячейка Ячейка Ячейка
# Заголовок Заголовок Заголовок Заголовок Заголовок
1 Ячейка Ячейка Ячейка Ячейка Ячейка
2 Ячейка Ячейка Ячейка Ячейка Ячейка
3 Ячейка Ячейка Ячейка Ячейка Ячейка
# Заголовок Заголовок Заголовок Заголовок Заголовок
1 Ячейка Ячейка Ячейка Ячейка Ячейка
2 Ячейка Ячейка Ячейка Ячейка Ячейка
3 Ячейка Ячейка Ячейка Ячейка Ячейка
# Заголовок Заголовок Заголовок Заголовок Заголовок
1 Ячейка Ячейка Ячейка Ячейка Ячейка
2 Ячейка Ячейка Ячейка Ячейка Ячейка
3 Ячейка Ячейка Ячейка Ячейка Ячейка
  
<таблица> ...
<таблица> ...
<таблица> ...
<таблица> ...

Как обернуть содержимое ячейки таблицы с помощью CSS?

Таблицы в HTML — абсурдные элементы. Применить свойства CSS к элементу таблицы — непростая задача. Поскольку CSS-свойства являются высокоструктурированным элементом, иногда они теряются в иерархии структуры.Также очень вероятно, что содержимое таблицы может изменить структуру или размеры таблицы. Например, длинные слова в ячейках таблицы могут привести к увеличению ширины ячейки. Если вы исправите эту проблему, может случиться так, что длинные слова пересекают границы ячеек. Этого можно избежать, выполнив перенос по словам в данных ячейки.

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

  • Использование свойства переноса слов: Это свойство используется, чтобы позволить длинным словам переноситься на следующую строку. .
  • Использование свойства разрыва слова: Это свойство используется, чтобы указать, как разорвать слово, когда слово достигнуто в конце строки. Разрывы строк в тексте могут появляться в определенных пробелах, например, когда есть пробел или дефис.

Пример:

Выход:

Примечание: В приведенной выше таблице мы определили ширину таблицы 600 пикселей и применили макет таблицы как фиксированный .Обратите внимание, что длинное слово , отмеченное красным цветом , образовано удалением пробелов, например, цель.


Метод 1: Использование свойства переноса слов: Перенос слов: break-word; свойство используется для разрыва длинного слова в соответствующей точке разрыва.

Пример:

< html >

<9003

9002 9002

0

0

0

< title >

Как обернуть ячейку таблицы

td-содержимое с помощью CSS?

название >

< стиль >

h2, h4 {

текст : центр;

}

таблица {

border-spacing: 0px;

расположение стола: фиксированное;

левое поле: авто;

поле справа: авто;

}

th {

цвет: зеленый;

граница: сплошной черный 1 пиксель;

}

td {

граница: 1 пиксель сплошной черный;

}

стиль >

головка >

< корпус

1>

< h2 стиль = "цвет: зеленый;" > GeeksforGeeks h2 >

< h4 > Простой пример без переноса слов h4 >

< таблица ширина = "600" >

< tr >

< th > Название курса th >

< th > Технические характеристики th >

< th > Продолжительность th >

tr >

9 0032

< tr >

< td > Структуры данных и алгоритмы td >

< td >

Включает предварительно записанную премию

< span style = "цвет: красный;" >

Видеоуроки и вопросы по программированию

span > для практики.

td >

< td > 4 месяца td >

tr >

< tr >

< td > Программа размещения GFG td >

td >

Этот курс помогает студентам подготовиться к программе набора персонала.

td >

< td > 3 месяца td >

tr >

таблица >

корпус >

html >

Выход:

Метод 2: Использование свойства разрыва слова: Разрыв слова: break-all; свойство используется для разбиения слова на любой символ.

Пример:

< html >

0

<

0

< title >

Как обернуть содержимое ячейки таблицы

td с помощью CSS?

название >

< стиль >

h2,

0

h3

0

h4 {

0

выравнивание текста: по центру;

}

таблица {

граничный интервал: 0 пикселей;

расположение стола: фиксированное;

левое поле: авто;

поле справа: авто;

}

th {

цвет: зеленый;

граница: сплошной черный 1 пиксель;

}

td {

граница: 1 пиксель сплошной черный;

перенос слов: break-word;

}

стиль >

головка >

< корпус

1>

< h2 стиль = "цвет: зеленый;" > GeeksforGeeks h2 >

< h4 > Обернуть содержимое ячейки таблицы с использованием свойства переноса слов h4 >

< таблица ширина = "600" >

< tr >

< th > Название курса th >

< th > Технические характеристики th >

< th > Продолжительность >

tr >

< tr >

< td > Структуры данных и алгоритмы td >

< td >

Включает предварительно записанную премию

< span style = "цвет: красный;" >

Видеоуроки и вопросы по программированию

span > для практики.

td >

< td > 4 месяца td >

tr >

< tr >

< td > Программа размещения GFG td >

td >

Этот курс помогает студентам подготовиться к программе набора персонала.

td >

< td > 3 месяца td >

tr >

таблица >

корпус >

html >

Вывод:

Примечание: Обратите внимание на разницу между результатами обоих свойств.Свойство word-wrap переносит слово на новую строку, в то время как свойство word-break продолжает следовать за потоком и прерывается на любом подходящем символе.

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

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

Вниманию читателя! Не прекращайте учиться сейчас. Освойте все важные концепции HTML с Web Design for Beginners | HTML курс.


Селекторы псевдоклассов - Мастерская макета CSS

Селектор псевдокласса действует так, как если бы вы добавили класс к элементу в вашей разметке.

Мастерская по макету CSS: селекторы псевдоклассов

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

  a: ссылка {}
а: посетил {}  

Эти селекторы работают так, как если бы они добавляли класс в зависимости от состояния ссылки. В этом случае независимо от того, посещена ли ссылка или нет.

Другие псевдоклассы, которые мы можем использовать для ссылки, на самом деле являются динамическими псевдоклассами . Они применяются в зависимости от того, что происходит в документе. Ссылка, на которую наведен курсор, добавлена ​​вкладка или активирована.

  a: наведение {}
a: active {}
a: focus {}  

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

У нас есть несколько других полезных псевдоклассов, с которыми можно поиграть.

: первенец

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

Селектор first-child был частью CSS2.1. В этом примере у нас есть набор абзацев.

  

Абзац первый.

Параграф второй.

Чтобы применить CSS только к первому абзацу внутри оболочки , мы используем селектор first-child.

  .wrapper p: first-child {}  

Это работает, только если есть элемент абзаца как первый элемент непосредственно внутри этого контейнера. Если мы добавим здесь заголовок первого уровня, то селектор first-child больше не будет выбирать абзац.

: последний ребенок

Целевой элемент, когда он является последним дочерним элементом родительского элемента.

Спецификация Selectors Level 3 принесла нам несколько новых селекторов псевдокласса. Селектор last-child похож на first-child, за исключением того, что он нацелен на последнего дочернего элемента родителя.

  .wrapper p: last-child {}  

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

: энный ребенок

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

Селектор nth-child действительно очень полезен. Простым примером является использование этого селектора для чередования строк таблицы.

  <таблица>
  

< html >

0

<

0

< title >

Как обернуть содержимое ячейки таблицы

td с помощью CSS?

название >

< стиль >

h2,

0

h3

0

h4 {

0

выравнивание текста: по центру;

}

таблица {

граничный интервал: 0 пикселей;

расположение стола: фиксированное;

левое поле: авто;

поле справа: авто;

}

th {

цвет: зеленый;

граница: сплошной черный 1 пиксель;

}

td {

граница: 1 пиксель сплошной черный;

разрыв слова: разбить все;

}

стиль >

головка >

< корпус

1>

< h2 стиль = "цвет: зеленый;" > GeeksforGeeks h2 >

< h4 > Обернуть содержимое ячейки таблицы с использованием свойства разбиения по словам h4 >

< таблица ширина = "600" >

< tr >

< th > Название курса th >

< th > Технические характеристики th >

< th > Продолжительность >

tr >

< tr >

< td > Структуры данных и алгоритмы td >

< td >

Включает предварительно записанную премию

< span style = "цвет: красный;" >

Видеоуроки и вопросы по программированию

span > для практики.

td >

< td > 4 месяца td >

tr >

< tr >

< td > Программа размещения GFG td >

td >

Этот курс помогает студентам подготовиться к программе набора персонала.

td >

< td > 3 месяца td >

tr >

таблица >

корпус >

html >

Имя Любимый цвет Любимое животное
Рэйчел Фиолетовый Кот
Джо Розовый Альбатрос
Элоиза Зеленый Слаг

Мы можем применить CSS к нечетным строкам с помощью следующего селектора.

  tr: nth-child (odd) {} ​​ 

Или четных строк:

  tr: nth-child (even) {}  

Эти ключевые слова - не единственный способ использовать nth-child. Мы можем настроить таргетинг на конкретную строку. Этот селектор только выберет строку 2.

  tr: nth-child (2) {}  

Значение ключевого слова odd равно этому селектору, в котором мы выбираем первый элемент и каждый второй элемент после него.

  tr: nth-child (2n + 1) td {}  

Есть несколько отличных ресурсов, которые помогут вам понять, как работает nth-child.Вместо того, чтобы воспроизводить все это, взгляните на:

: nth-of-type

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

После того, как вы разобрались с тем, как работает nth-child, вы можете использовать тот же синтаксис для nth-of-type . Этот селектор выбирает только те элементы, которые относятся к тому же типу, что и элемент, к которому он применяется.

В моем примере ниже показаны заголовки и абзацы.

Чтобы применить CSS ко всем остальным абзацам, но игнорировать заголовки, я мог бы использовать следующий селектор.

  p: nth-of-type (нечетное) {}  

: единственный ребенок

Псевдокласс only-child будет соответствовать, если элемент является единственным дочерним элементом родительского - например, список только с одним элементом списка.

  li: только ребенок {}  

Это может быть полезным селектором при проектировании переменного количества контента, поступающего из CMS.

: пусто

Пустой псевдокласс будет соответствовать, если элемент полностью пуст или содержит только HTML-комментарий.

  п: пусто {}  

Не будет совпадать, если внутри элемента есть пробелы.

  

Пустой псевдокласс будет соответствовать первым двум, но не последнему абзацу.

: не

Псевдокласс , а не позволяет вам что-то делать, если селектор не совпадает.Селектор, который вы хотите исключить, находится внутри круглых скобок. В приведенном ниже примере мы делаем шрифт жирным, если он не находится внутри td с классом animal .

  td: not (.animal) {
  font-weight: жирный;
}  
.

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

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