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.201119.00КефирМосква13530
13.12.201119.00МолокоСамара13570
14.12.201119.00СокУфа13580
11.00ЙогуртВладимир36530

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


Глобальные атрибуты 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>

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

Атрибут 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>

Значения

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

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

0

Аналог 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>

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

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

Атрибут 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>

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

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

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