Table html атрибуты – HTML таблицы продвинутые возможности и доступность — Изучение веб-разработки — Вебджем.рф

Содержание

Атрибуты для таблиц HTML.

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

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

1. И первое, что мы рассмотрим — это задавать ширину нашей таблице, так как сейчас мы ее создали и она той ширины, которой достаточно, чтобы вместить информацию в ячейку. Часто бывает, что таблицу, по дизайну или другим соображениям, нужно увеличить и это делается с помощью атрибута width=«750». В тег <table

></table> записывается наш атрибут, а значение, указанное в атрибуте 750 задает ширину таблицы в 750px.

2. Следующий момент, который мы рассмотрим это выравнивание содержимого. Если обновим таблицу, то мы увидим что, все элементы ячеек прижаты к левому краю. Часто становится вопрос: как значения ячеек выровнять по центру. Этот атрибут и мы уже использовали его в уроке Как вставить изображение в HTML документ.

Этот атрибут является универсальным, поэтому мы его будем использовать и в таблицах. Это атрибут Align. И так мы хотим содержимое ячеек выровнять по центру, соответственно атрибуту указываем значение center align=«center». Данный атрибут мы можем вставить в тег формирующий ячейку <td> </td>. Содержимое выровняется по центру только у одной ячейки. Если же нужно выровнять всю строку по центру, то атрибут

Align вставляется в тег создающий строку таблицы <tr align=«center»></tr>.

И еще маленький момент, если присмотрится на таблицу, то заголовки у таблицы уже расположены по центру, то есть тег <th> </th> автоматически выравнивает контент по центру.

Ну, и последнее про этот атрибут, это ситуация, когда нужно выровнять всю таблицу по центру. Для этого прописываем атрибут в сам тег <table align=«center»></table> и вся таблица выровняется по центру.

3. Далее рассмотрим атрибут, который увеличивает пространство внутри ячейки. Сейчас содержимое ячейки достаточно плотно прилегает к верхнему и нижнему краю и чтобы увеличить отступы в ячейке внутри тега <table> </table> вставляем атрибут cellpadding=«15»

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

4. И рассмотрим последний атрибут для таблицы, с помощью которого можно увеличить расстояние между ячейками. Это похожий атрибут и он так же вставляется в тег <table> </table> — это атрибут cellspacing=«10». Теперь если обновить страницу, то между ячейками появится расстояние в 10px.

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

width= «750» — задать ширину таблице
colspan = «3» — объедениеть три ячейки по горизонтали
rowspan = «2» — объядение по вертикали
cellpadding = «10» — задает отступы внутри ячеек в таблице на 10 px
cellspacing = «5» — расстояние между ячейками размеры рамки
border «1» — создается толщину рамки вокруг таблицы
align = «center» — все элементы выровнять по центру

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

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Первая HTML страница</title>
</head>
<body>

дата	время	продект	место	жиры, белки, углеводы			деньги
12.12.2011	19.00	Кефир	Москва	1	3	5	30
13.12.2011	19.00	Молоко	Самара	1	3	5	70
14.12.2011	19.00	Сок	Уфа	1	3	5	80
14.12.2011	11.00	Йогурт	Владимир	3	6	5	30

На этом урок завершим. Результат работы можно посмотреть в Демо-версии и сравнить с тем, что у Вас получилось, а мы идем дальше и переходим к формам.

Глобальные атрибуты HTML — список атрибутов. Сlass, style, title, data атрибуты тегов

На этой странице собраны глобальные атрибуты тегов.

Список атрибутов HTML

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

Атрибут	Описание
accesskey	Определяет горячую клавишу для активации элемента или перевода фокуса на элемент. Значение: символ клавиши на клавиатуре. `<a href="https://guruweba.com" accesskey="k">текст</a>`
class	Определяет одно или больше имен класса элемента. Используется для связи HTML элемента с таблицами стилей CSS. Значение: одно или более имен классов. `<div>контент</div>`
contenteditable	Определяет возможность редактирования контента элемента пользователем. Значение: true \| false. `<p contenteditable="true">текст</p>`
contextmenu	Определяет контекстное меню для элемента. Контекстное меню появляется при нажатии на правую кнопку мыши. Значение: id контекстного меню <menu>. `<div contextmenu="menu_id">контент</div>`
data-*	Используется для хранения пользовательских данных. Значение: пользовательское. Можно использовать атрибут с любым именем, начинающимся на «data-«, например, data-count, data-value, data-result, data-chtoto. `<div data-count="5">контент</div>`
dir	Определяет направление текста внутри элемента (слева направо или справа налево). Значение: ltr — слева на право \| rtl — справа на лево. `<p dir="ltr">текст</p>`
draggable	Определяет, можно ли перетаскивать элемент. Значение: true \| false \| auto. `<div draggable="true">контент</div>`
hidden	Скрывает элемент. Значение: Отсутствует. `<p hidden>текст</p>`
id	Определяет идентификатор элемента. Значение: Название идентификатора. `<button>контент</button>`
lang	Указывает на язык содержимого элемента. Значение: Language Code (код языка). `<p lang="en">текст</p>`
spellcheck	Определяет, нужно ли браузеру проверять грамматику содержимого элемента. Значение: true \| false. `<input name="input_name" type="text" spellcheck="true">`
style	Определяет CSS стили элемента (стили также могут быть определены другими способами). Значение: CSS код. `<div>контент</div>`
tabindex	Определяет порядковый номер элемента при табуляции. Значение: порядковый номер. `<input name="input_name" type="text" tabindex="1">`
title	Содержит дополнительную информацию об элементе. Значение: текстовая строка. `<img src="img.png" alt="img_alt" title="Гуру Веба">`
translate	Определяет, нужно ли переводить содержимое элемента. Значение: yes \| no. `<p translate="yes">текст</p>`

Атрибут width | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
2.0+	1.0+	2.0+	1.0+	1.0+	1.0+	1.0+

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

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

Задает ширину таблицы. Если общая ширина содержимого превышает указанную ширину таблицы, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в таблице находятся изображения, атрибут width будет проигнорирован, и новая ширина таблицы будет вычислена на основе ее содержимого.

Синтаксис

<table>...</table>

Значения

Любое целое значение в пикселах или процентах от доступного пространства.

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

Ширина вычисляется на основе содержимого таблицы.

Аналог CSS

width

Пример

HTML 4.01IECrOpSaFx

<!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>Тег TABLE, атрибут width</title>
 </head>
 <body>

   <table cellpadding="10" border="1">
    <tr>
     <td> ... </td>
    </tr> 
   </table> 

 </body>
</html>

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Атрибут cols | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
4.0+	1.0+	6.0+	1.0+	1.0+	1.0+	1.0+

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

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

Атрибут cols задает количество столбцов в таблице, помогая браузеру в подготовке к ее отображению. Без этого атрибута таблица будет показана только после того, как все содержимое таблицы будет загружено в браузер и проанализировано. Использование атрибута cols позволяет несколько ускорить отображение содержимого таблицы.

Синтаксис

<table cols="число">...</table>

Значения

Любое целое положительное число.

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

Нет.

Пример

HTML 4.01IECrOpSaFx

<!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>Тег TABLE, атрибут cols</title>
 </head>
 <body>

  <table cellspacing="0" border="1" cols="10">
   <tr> 
    <td>&nbsp;</td>
    <td>1995</td><td>1996</td><td>1997</td><td>1998</td>
    <td>1999</td><td>2000</td><td>2001</td><td>2002</td>
    <td>2003</td>
   </tr>
   <tr> 
    <td>Нефть</td><td>5</td><td>7</td><td>2</td><td>8</td>
    <td>3</td><td>34</td><td>62</td><td>74</td><td>57</td>
   </tr>
   <tr>
    <td>Золото</td><td>3</td> <td>6</td><td>4</td><td>6</td>
    <td>4</td><td>69</td><td>72</td><td>56</td><td>47</td>
   </tr>
   <tr>
    <td>Дерево</td><td>5</td><td>8</td><td>3</td><td>4</td>
    <td>7</td><td>73</td><td>79</td><td>34</td><td>86</td>
   </tr>
  </table>

 </body>
</html>

Атрибут cellpadding | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
2.0+	1.0+	2.0+	1.0+	1.0+	1.0+	1.0+

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

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

Определяет расстояние между границей ячейки и ее содержимым. Этот атрибут добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры. Без cellpadding текст в таблице «налипает» на рамку, снижая тем самым его восприятие. Добавление же cellpadding позволяет улучшить читабельность текста. При отсутствии границ особого значения этот атрибут не имеет, но может помочь, когда требуется установить пустой промежуток между ячейками.

Синтаксис

<table cellpadding="значение">...</table>

Значения

Любое целое значение в пикселах или процентах от доступного пространства.

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

Аналог CSS

padding

Пример

HTML 4.01IECrOpSaFx

<!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>Тег TABLE, атрибут cellpadding</title>
 </head>
 <body>

  <table cellpadding="7" border="2">
   <tr>
    <td> ... </td>
   </tr> 
  </table> 

 </body>
</html>

Статьи по теме

Атрибут align | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
2.0+	1.0+	2.0+	1.0+	1.0+	1.0+	1.0+

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

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

Задает выравнивание таблицы по краю окна браузера.

Синтаксис

<table align="left | center | right">...</table>

Значения

left: Выравнивание таблицы по левому краю.
center: Выравнивание таблицы по центру.
right: Выравнивание по правому краю.

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

left

Аналог CSS

text-align

Пример

HTML 4.01IECrOpSaFx

<!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>Тег TABLE, атрибут align</title>
 </head>
 <body>
  <table align="center" bgcolor="#ffcc00">
   <tr>
    <td> ... </td>
   </tr> 
  </table> 

 </body>
</html>

Table html атрибуты – HTML таблицы продвинутые возможности и доступность — Изучение веб-разработки

Атрибуты для таблиц HTML.

Глобальные атрибуты HTML — список атрибутов. Сlass, style, title, data атрибуты тегов

Список атрибутов HTML

Атрибут width | htmlbook.ru

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

Описание

Синтаксис

Значения

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

Аналог CSS

Атрибут cols | htmlbook.ru

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

Описание

Синтаксис

Значения

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

Атрибут cellpadding | htmlbook.ru

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

Описание

Синтаксис

Значения

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

Аналог CSS

Статьи по теме

Атрибут align | htmlbook.ru

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

Описание

Синтаксис

Значения

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

Аналог CSS

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

Рубрики