Теги таблица html: Атрибут border | htmlbook.ru

Теги для создания и оформления таблицы в html

Цель урока: создание и оформление таблицы в html

Содержание:

• Создание таблицы в HTML
  • Атрибуты тега TABLE
  • Атрибуты тега TR — строки
  • Атрибуты тега TD или TH — ячейки
• Объединение ячеек в таблице
• Группировка ячеек: COLGROUP
  • Атрибуты тега COLGROUP
• HTML вложенные таблицы

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

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

1
2
3
4
5

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

Результат:

Добавим границу для таблицы — атрибут border:

1
2
3
4
5

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

Результат:

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

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

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

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

Атрибуты тега TR — строки

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

Важно:

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

Тег caption заголовка таблицы может иметь атрибут, определяющий расположение заголовка — align — со следующими значениями:
top — заголовок над таблицей,
bottom — заголовок под таблицей,
left — заголовок вверху и выровнен влево,
right — заголовок вверху и выровнен вправо.

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

Выполнение:

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-я строка таблицы).

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

В происходит при помощи двух атрибутов тега td: COLSPAN — объединение ячеек по горизонтали, ROWSPAN — объединение ячеек по вертикали.

Синтаксис COLSPAN:

1 2 3 4 5 6 7 8 9

<table> <tr> <td colspan="2"> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table>

Синтаксис ROWSPAN:

1 2 3 4 5 6 7 8 9

<table> <tr> <td rowspan="2"> </td> <td> </td> </tr> <tr> <td> </td> </tr> </table>

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

Выполнение:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<table  border="1">
<caption>Таблица с объединенными ячейками </caption>
<tr>
  <th rowspan="2">&nbsp;</th>
  <th colspan="2">3аголовок 1</th>
</tr>
<tr>
  <th> Заголовок 1.
 
  1</th>
  <th> Заголовок 1.2</th>
</tr>
<tr>
  <th> Заголовок 2</th>
  <td> Ячейка 1</td>
  <td> Ячейка 2</td>
</tr>
<tr>
  <th> Заголовок 3</th>
  <td> Ячейка 3</td>
  <td> Ячейка 4</td>
</tr>
</table>

Лабораторная работа №2: создайте таблицы, с расположенными в их ячейках цифрами, точно по образцу:

Группировка ячеек: COLGROUP

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

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

Пример: Создать таблицу по образцу

Выполнение:

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

<TABLE border="4">
<colgroup >
	<col span="2" />
	<col />
</colgroup>
<colgroup>
	<col span=2/>
</colgroup>
<TR>
<TD> 1-1 </TD><TD> 1-2 </TD><TD> 1-3 </TD><TD> 1-4 </TD><TD> 1-5</TD>
</TR>
<TR>
<TD> 2-1 </TD><TD> 2-2 </TD><TD> 2-3 </TD><TD> 2-4 </TD><TD> 2-5 </TD>
</TR>
</table>

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

HTML вложенные таблицы

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

Пример: создайте вложенные таблицы по образцу:

Выполнение:

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

<TABLE border="4" bgcolor="yellow">
<tr>
   <td>Таблица 1</td>
   <td>
      <TABLE>
      <tr>  <td>Таблица 2</td><td>Ячейка 2-2</td>  </tr>
      <tr>  <td>Ячейка 3-2</td><td>Ячейка 4-2</td> </tr>
      </TABLE>
   </td>
<tr>
   <td>Ячейка 3-1</td>
   <td>Ячeйкa 4-1</td>
</tr>
</TABLE>

Лабораторная работа №3:

• Создайте таблицу с фиксированными размерами, содержащую ячейки указанной на рисунке ширины
• Вставьте в левую нижнюю ячейку вложенную таблицу
• Фон ячеек вложенной таблицы сделайте серым

Лабораторная работа №4:

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

Таблицы в HTML • Vertex Academy

17 августа, 2016

Данная статья написана командой Vertex Academy. Это одна из статей из нашего Самоучителя по HTML&CSS. Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

Сегодня в вёрстке сайтов таблицы имеют не такое большое значение, как несколько лет назад. Раньше сайты создавались с помощью так называемой табличной верстки, и таблицы были основой, скелетом сайта. Позже, с развитием HTML, а также по мере появления всё большего количества портативных устройств для выхода в интернет (планшеты, смартфоны) сайты, сверстанные с помощью таблиц, «ехали», не помещались на экране, отображались коряво, и возникла потребность в резиновой, адаптивной и отзывчивой верстке.
Поэтому сейчас таблицы используются по прямому назначению — для структурированной подачи информации, будь то меню, прайс-лист или ведомость по сдавшим летнюю сессию.

Основные теги таблицы

Таблица состоит из нескольких обязательных тегов:

• тег <table > (по англ. таблица) — это тег, который говорит браузеру, что внутри него будет таблица
• тег <tr> (от англ. table row — строка таблицы) обозначает строку
• тег <td> (от англ. table data — данные таблицы) обозначает ячейку. Именно в этот тег мы закладываем всё, из чего будет состоять таблица — текст, картинки, списки, кнопки или даже другие таблицы

Давайте посмотрим схематически, как это всё ложится в коде:

То есть, для того чтобы создать таблицу на 3 колонки и 4 строки нам нужно 4 раза прописать элемент <tr> и в каждом из них по три раза — элемент <td>. Проверим?

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

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

Оглавление таблиц

Чтобы как-то назвать таблицу, используется тег <caption>, по английски заголовок.

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

В HTML для этого есть специальный тег <th> (от англ. table header — заголовок таблицы). Он прописывается вместо <td> в первой строке. Давайте посмотрим на примере нашего мини-словарика, как это работает:

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

Иногда в таблицах нужно выделить не только первую строку, но и первый столбец. Например так:

Думаете, для этого тоже есть специальный тег?  А нет 🙂 Используется по прежнему тот же <th>, только вставляется он не вместо <td> в первой строке, а вместо первого <td> в каждой строчке, вот так:

Внимательный читатель наверняка заметил, что первая ячейка в первой колонке пустая. Если вам нужна пустая ячейка в таблице — её все равно нужно создать, просто ничего не вписывать между тегами <th></th> или <td></td>. Если этого не сделать — браузер подвинет остальные ячейки, куда сочтет нужным и содержимое таблицы поплывет. Попробуйте сами в JSFiddle убрать элемент <th></th>  и увидите, что произойдет.

Объединение ячеек по вертикали

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

Атрибут rowspan объединяет ячейки у соседних рядов (т.е. по вертикали).

Пример объединенных ячеек:

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

border — отвечает за толщину границы, значение задается по умолчанию в пикселях

cellpadding — расстояние от контента ячейки до границ. Если оно =»0″ — значит текст (или любой другой контент) вплотную прилегает к границам ячейки.  В случае с текстом это не очень красиво , поэтому мы зададим его равным 4 пикселям.

cellspacing — расстояние между ячейками. Если оно =»0″ — значит границы ячеек накладываются друг на дружку. Если оно больше — значит каждая ячейка отстоит от другой на заданное расстояние и получается как-бы двойная рамка. Выглядит на любителя:

Если мы задали атрибут border, то по умолчанию cellspasing равен 2 пикселям. Поэтому если мы хотим границы, но при этом не хотим разрывов между ними — нужно указывать, что cellspasing=»0″

Здесь же вы можете видеть, как тесно тексту в ячейках — это потому, что применен cellpadding=»0″

Итак, как же работает атрибут rowspan? Прежде, чем сверстать таблицу — нарисуйте её от руки на листке бумаги или создайте в экселе, так вам будет проще разобраться во всех этих строчках и колонках.

Схематически нашу таблицу «Сравнение моделей» можно представить, как поле для игры в морской бой:

В ней есть 4 колонки и 4 строчки,

во второй колонке вторая и третья ячейки объединены — ставим кораблик.

В четвертой колонке совмещены третья и четвертая ячейка — и туда ставим кораблик.

Вот только в HTML мы пишем код не колонками, а строчками. Как же записать это в коде?

Очевидно, что первая строка без изменений — пишем <tr></tr> и в нём 4 элемента <th>.

Вторая строка: пишем <tr></tr>, и в нём 4 элемента <td>, только теперь второму из них прописываем атрибут rowspan=»2″ (это означает, что будут объединены 2 ячейки)

Третья строка:  пишем <tr></tr>, и теперь у нас всего 3 элемента <td>, потому что один из них, который во второй колонке «отобрала» верхняя ячейка.  Последнему элементу <td> также нужно прописать атрибут rowspan=»2″.

Четвертая строка: внутри элемента <tr> снова прописываем всего 3 элемента <td>, потому что в четвертой колонке его уже нет — он поглотился верхней ячейкой.

Еще раз посмотрим на нашу таблицу, но уже с тегами. Читать нужно, как книгу — слева направо, сверху вниз:

А теперь наконец проверим, как это работает в редакторе:

Объединение ячеек по горизонтали

Атрибут colspan объединяет ячейки у соседних колонок (т. е. по горизонтали). Принцип здесь тот же, что и с rowspan

К примеру нам нужно создать вот такую таблицу:

Давайте снова прочитаем её слева направо, сверху вниз:

• строка 1: пять <th>, причем первый оставляем незаполненным
• строка 2: один <th> и 3 <td>, вторая и третья ячейки объединены, т.е. для второго <td> прописываем colspan=»2″
• строка 3: один <th> и 2 <td>, третья,  четвертая и пятая ячейки объединились, т.е. для третьего <td> пишем colspan=»3″
• строка 4:  один <th> и 2 <td>. Вторая и третья, а также четвертая и пятая объединены — для каждого из двух <td> прописываем colspan=»2″

Схематично это можно отобразить так:

Теперь посмотрим на код и результат поближе:

Всё получилось 🙂

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

А пока всё. До встречи!

Тег HTML tbody

❮ Назад Полный справочник HTML Далее ❯

Пример

HTML-таблица с элементами, и:

Попробуйте сами »

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

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

9Тег 0043 используется для группировки содержимого тела в таблице HTML.

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

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

Примечание: Элемент должен иметь один или несколько Теги внутри.

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

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

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

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

9Тег 0043 также поддерживает атрибуты событий в HTML.

Дополнительные примеры

Пример

Стиль, и с помощью CSS:

Попробуйте сами »

Пример

Как выровнять содержимое внутри (с помощью CSS):

Попробуйте сами »

Пример

Как выровнять содержимое внутри по вертикали (с помощью CSS):

Попробуйте сами »

Настройки CSS по умолчанию

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

tbody {
  display: table-row-group;
  вертикальное выравнивание: посередине;
цвет границы: наследовать;
}

❮ Предыдущий Полный справочник HTML Следующий ❯

ВЫБОР ЦВЕТА

---

---

---

Лучшие учебники

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3. CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебник по jQuery

Основные ссылки

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

2 Top3 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры How To
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

---

FORUM | О

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

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Тег HTML

❮ Пред. Следующий ❯

Тег

определяет HTML-таблицу. Он содержит другие элементы HTML, определяющие структуру таблицы.

Тег

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

Не рекомендуется использовать таблицы для верстки. Иногда таблицы неправильно используются в HTML для управления макетом страницы. Для этого вы можете использовать CSS в качестве альтернативы HTML-таблицам.

Тег

,

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

идет парами. Содержимое записывается между открывающим () и закрывающим () тегами.

Пример тега HTML

:

 

  <голова>
    
    <стиль>
      стол {
        ширина: 80%;
        поле: 30px авто;
        граница коллапса: коллапс;
      }
      й,
      тд {
        отступ: 10 пикселей;
        граница: 1px сплошная #666;
      }
    
  
  <тело>
    <таблица>
      

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

Результат

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

Месяц	Дата
Июнь	10.06.2018
Июль	15.07.2018

не поддерживаются в HTML5. Для таблиц стилей используйте свойства CSS, перечисленные ниже.

Таблица

также поддерживает глобальные атрибуты и атрибуты событий.

Как оформить тег

?

Общие свойства для изменения визуального веса/выделения/размера текста в теге

:

• Свойство CSS font-style устанавливает стиль шрифта. нормальный | курсив | наклонный | начальная | наследовать.
• Свойство CSS font-family задает приоритетный список из одного или нескольких имен семейств шрифтов и/или общих имен семейств для выбранного элемента.
• Свойство CSS font-size устанавливает размер шрифта.
• Свойство CSS font-weight определяет, должен ли шрифт быть полужирным или толстым.
• Свойство CSS text-transform управляет регистром и регистром текста.
• Свойство CSS text-decoration определяет украшение, добавляемое к тексту, и является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

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

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

  Комментарий *

  Имя *

  Email *

  Сайт