Как задать размеры таблицы в html
Перейти к содержимому

Как задать размеры таблицы в html

  • автор:

Как задать размеры таблицы в html

Создадим простейшую таблицу:

    Таблицы в HTML5   
Модель Компания Цена
Nexus 6P Huawei 49000
iPhone 6S PLus Apple 62000
Lumia 950 XL Microsoft 35000

Таблицы в HTML5

Здесь у нас в таблице 4 строки, и каждая строка имеет по три столбца.

При этом в данном случае первая строка выполняет роль заголовка, а остальные три строки собственно являются содержимым таблицы. Разделения заголовков, футера и тела таблицы в html предусмотрены соответственно элементы thead , tfoot и tbody . Для их применения изменим таблицу следующим образом:

 
Популярные смартфоны 2015
Модель Компания Цена
Nexus 6P Huawei 49000
iPhone 6S PLus Apple 62000
Lumia 950 XL Microsoft 35000
Информация по состоянию на 17 марта

В элемент thead заключается строка заголовков. Для ячеек заголовок используется не элемент td , а th . Элемент th выделяет заголовок жирным. А все остальные строки заключаются в tbody

Элемент tfoot определяет подвал таблицы или футер. Здесь обычно выводится некоторая вспомогательная информация по отношению к таблице.

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

Заголовки таблиц в HTML5

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

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

    Таблицы в HTML5 td  
1 2 3
4 5
6 7

Создание таблиц в HTML ⇒ код таблицы, ширина и высота

Этот урок научит вас создавать HTML таблицы и манипулировать их свойствами.

Когда-то HTML таблицы использовались для верстки сайтов, но сегодня идеологами современных версий языков гипертекстовой разметки: XHTML и HTML 5, рекомендовано применять таблицы по назначению, то есть для представления данных.

HTML код таблицы, пример:

как сделать таблицу в хтмл

Посмотреть в новом окне: HTML таблица

Теги, атрибуты и значения

  • Теги – объявляют о создании HTML таблицы.
  • border=»1″ – устанавливает границу HTML таблицы и ее ячеек в 1 пиксел. Если атрибут border отсутствует или его значение равно 0 – границ не будет.
  • Теги – определяют табличный ряд.
  • Теги – определяют ячейку HTML таблицы.

HTML таблица может иметь множество рядов и ячеек, а ячейка, в свою очередь, может содержать внутри себя другую таблицу (это свойство будет рассмотрено в одном из следующих уроков).

Как сделать таблицу в HTML | Cellpadding

Определим cellpadding или пространство внутри ячеек таблиц:

Атрибуты и значения

  • cellspacing=»0″ – определяет расстояние между ячейками таблиц, а также между границами ячеек и границей таблицы.
  • cellpadding=»8″ – пространство между границей ячейки и ее содержимым.
  • style=»» – линейное включение CSS.
  • background-color: – определяет цвет фона.
  • color: – определяет цвет текста.

Символ пробела   в этом месте заполняет пустое пространство внутри ячейки.

ячейка 1, первый ряд
ячейка 1, второй ряд ячейка 2, второй ряд

Заметьте, что в данном случае высота и ширина таблицы определена ее содержимым и значением cellpadding . И еще, различными браузерами свойства некоторых атрибутов отображаются по разному, если в Internet Explorer четко видно, что рамка черная, то, например, в Firefox она будет переливаться. Как обойти эти расхождения, вы узнаете в уроке CSS таблица.

Как сделать таблицу в HTML | Cellspacing

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

cellspacing=»» , как уже было сказано выше, определяет расстояние между границами ячеек таблицы, а также между границами ячеек и границeй таблицы.

ячейка 1, первый ряд
ячейка 1, второй ряд ячейка 2, второй ряд

В следующем примере border=»0″ отменит границы HTML таблицы и ячеек:

ячейка 1, первый ряд
ячейка 1, второй ряд ячейка 2, второй ряд

HTML размер таблицы, ширина и высота

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

ячейка 1, первый ряд ячейка 2, первый ряд ячейка 3, первый ряд
ячейка 1, второй ряд ячейка 2, второй ряд ячейка 3, второй ряд

Посмотреть в новом окне: Ширина HTML таблицы

Атрибуты и значения

  • width – в данном случае была определена ширина HTML таблицы в процентах.
  • height – определяет высоту таблицы.
Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018

HTML изображение-карта HTML код таблицы Еще HTML таблица

© 2009 — 2023 | При использовании материала, ссылайтесь на мой сайт!
По всем вопросам обращайтесь: go@ab-w.net | HTML код таблицы, теги? – Не вопрос!

Задаём размеры таблицы

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

С помощью CSS можно управлять размерами таблицы, задавать желаемую ширину и высоту. Также размерами можно управлять с помощью атрибутов таблицы, но мы рассмотрим только CSS.

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

Ширина таблицы задаётся с помощью CSS-свойства width , а высота с помощью свойства height , например:

table

Размеры таблицы можно задавать как в абсолютных единицах, например, в пикселях — 20px , так и в относительных, в процентах — 20% .

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

Особое значение auto включает расчёт размеров по умолчанию. Например, width: auto; или height: auto; .

Важное замечание. Проценты при задании высоты обычно не работают.

Перейти к заданию

  • index.html

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

Во второй статье этого модуля мы рассматриваем ещё несколько продвинутых возможностей в HTML таблицах — такие как заголовок/описание и группировка строк внутри head, body и footer секциях таблицы, а также доступность таблиц для пользователей с ограниченными возможностями.

Необходимые знания: Базовый HTML (Введение в HTML).
Цель: Изучить более продвинутые возможности HTML таблиц и их доступность.

Добавление заголовка к таблице с помощью

table> caption> Dinosaurs in the Jurassic period caption> . table> 

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

Упражнение: Добавление заголовка

Давайте попробуем это, вернёмся к примеру который мы ранее встретили в прошлой статье.

  1. Откройте расписание занятий школьного учителя по языку в конце статьи HTML таблицы основы, или сделайте копию нашего timetable-fixed.html файла.
  2. Добавьте подходящий заголовок к таблице.
  3. Сохраните свой код и откройте его в браузере, чтобы посмотреть как это выглядит.

Примечание: Этот пример можно найти на GitHub по ссылке timetable-caption.html (живой пример).

Добавление структуры с помощью , и

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

Эти элементы не создают дополнительной доступности для пользователей со скринридерами и не приводят к какому-то визуальному улучшению при их использовании. Зато они очень полезны при стилизации и разметке, как точки для добавления CSS к вашей таблице. Вот несколько интересных примеров, в случае длинной таблицы вы можете сделать header и footer таблицы повторяемый на каждой печатной странице, или вы можете сделать body таблицы отображаемое на одной странице и иметь доступ ко всему содержимому контенту прокручивая вверх и вниз.

  • Элементом нужно обернуть часть таблицы которая относится к заголовку — обычно это первая строка содержащая заголовки колонок, но это не обязательно всегда такой случай. Если вы используете / элемент, тогда заголовок должен находиться ниже его.
  • Элементом нужно обернуть ту часть, которая относится к footer таблицы — например, это может быть последняя строка в которой отражаются суммы по столбцам таблицы. Вы можете включить сюда footer таблицы, как и следовало ожидать, или чуть ниже заголовка таблицы (браузер всё равно отобразит его внизу таблицы).
  • Элементом необходимо обернуть остальную часть содержимого таблицы которая не находится в header или footer таблицы. Этот блок располагают ниже заголовка таблицы или иногда footer таблицы, зависит от того какую структуру вы решите использовать (читать выше по тексту).

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

Упражнение: Добавление структуры таблицы

Давайте используем эти новые элементы.

  1. В первую очередь, сделайте копию spending-record.html и minimal-table.css в новой папке.
  2. Попробуйте открыть это в браузере — вы увидите, что все выглядит классно, но могло бы быть лучше. Строка «SUM» которая содержит потраченные суммы кажется находится не в том месте и некоторые детали отсутствуют в коде.
  3. Поместите очевидную строку заголовка внутрь элемента, строку «SUM» внутрь элемента и оставшийся контент внутрь элемента.
  4. Сохраните, перезагрузите и вы увидите, что добавление элемента привело к тому, что строка «SUM» опустилась к нижней части таблицы.
  5. Далее, добавьте атрибут colspan , чтобы ячейка «SUM» занимала первые четыре столбца, таким образом числовое значение «Cost» появится в последнем столбце.
  6. Давайте добавим несколько простых дополнительных стилей к таблице, чтобы дать вам представление насколько эти элементы полезны при использовании CSS. Внутри в вашего HTML документа вы увидите пустой элемент . Внутри этого элемента добавьте следующие строки CSS кода:

tbody  font-size: 90%; font-style: italic; > tfoot  font-weight: bold; > 

Примечание: Мы не ожидаем что сейчас вы полностью поймёте CSS. Вы узнаете больше когда пройдёте наши CSS курсы (например, Вступление в CSS это хорошее место для начала; у нас также есть статья конкретно о стилизации таблиц).

Ваша готовая таблица должна выглядеть примерно так:

doctype html> html> head> meta charset="utf-8" /> title>My spending recordtitle> style> html  font-family: sans-serif; > table  border-collapse: collapse; border: 2px solid rgb(200, 200, 200); letter-spacing: 1px; font-size: 0.8rem; > td, th  border: 1px solid rgb(190, 190, 190); padding: 10px 20px; > th  background-color: rgb(235, 235, 235); > td  text-align: center; > tr:nth-child(even) td  background-color: rgb(250, 250, 250); > tr:nth-child(odd) td  background-color: rgb(245, 245, 245); > caption  padding: 10px; > tbody  font-size: 90%; font-style: italic; > tfoot  font-weight: bold; > style> head> body> table> caption> How I chose to spend my money caption> thead> tr> th>Purchaseth> th>Locationth> th>Dateth> th>Evaluationth> th>Cost (€)th> tr> thead> tfoot> tr> td colspan="4">SUMtd> td>118td> tr> tfoot> tbody> tr> td>Haircuttd> td>Hairdressertd> td>12/09td> td>Great ideatd> td>30td> tr> tr> td>Lasagnatd> td>Restauranttd> td>12/09td> td>Regretstd> td>18td> tr> tr> td>Shoestd> td>Shoeshoptd> td>13/09td> td>Big regretstd> td>65td> tr> tr> td>Toothpastetd> td>Supermarkettd> td>13/09td> td>Goodtd> td>5td> tr> tbody> table> body> html> 

Примечание: Этот пример можно также найти на GitHub по ссылке spending-record-finished.html (живой пример).

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

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