Html5 фиксированные th для таблицы. Это большой текст
Спецификация CSS даёт неограниченные возможности для оформления таблиц. По умолчанию таблица и ячейки таблицы не имеют видимых границ и фона, при этом ячейки внутри таблицы не прилегают вплотную друг к другу.
Ширина ячеек таблицы определяется шириной их содержимого, поэтому ширина столбцов таблицы может быть разной. Высота всех ячеек ряда одинаковая и определяется высотой самой высокой ячейки.
Форматирование таблиц
1. Границы таблицы border
Таблица и ячейки внутри неё по-умолчанию отображаются в браузере без видимых границ. Границы таблицы задаются свойством border:
Table { border-collapse: collapse; /*убираем пустые промежутки между ячейками*/ border: 1px solid grey; /*устанавливаем для таблицы внешнюю границу серого цвета толщиной 1px*/ }
Границы ячеек заголовка каждого столбца задаются для элемента th:
Th {border: 1px solid grey;}
Границы ячеек тела таблицы задаются для элемента td:
Td {border: 1px solid grey;}
Толщина рамок соседних ячеек не удваивается, поэтому задать границы для всей таблицы можно следующим способом:
Th, td {border: 1px solid grey;}
Внешнюю границу таблицы можно выделить, задав ей увеличенную ширину:
Table {border: 3px solid grey;}
Границы можно задавать частично:
/* устанавливаем для таблицы внешнюю границу серого цвета толщиной 3px */ table {border-top: 3px solid grey; } /* задаём для ячейки тела таблицы границу серого цвета толщиной 1px */ td {border-bottom: 1px solid grey;}
Подробнее о свойстве border вы можете прочитать .
2. Как задать ширину и высоту таблицы
По умолчанию ширина и высота таблицы определяется содержимым её ячеек. Если ширина не задана, то она будет равна ширине самого широкого ряда (строки).
Ширина таблицы и столбцов задаётся с помощью свойства width . Если для таблицы задано table {width: 100%;} , то ширина таблицы будет равна ширине блока-контейнера, в котором она находится.
Ширину таблицы и столбцов обычно задают в px или % , например:
Table {width: 600px;} th {width: 20%;} td:first-child {width: 30%;}
Высота таблицы не задается. Высотой рядов таблицы можно управлять, добавив верхний и нижний padding для элементов
Th, td {padding: 10px 15px;}
3. Как задать фон таблицы
По умолчанию фон таблицы
и ячеек прозрачный. Если страница или блок, содержащие таблицу, имеют фон, то он будет просвечиваться сквозь таблицу. Если фон задан и для таблицы и для ячеек, то в местах наложения фона таблицы и ячеек будет виден фон только ячеек. В качестве фона для таблицы в целом и её ячеек могут выступать:
заливка ,
,
.
4. Столбцы таблицы
Модель CSS таблиц ориентирована в основном на строки (ряды), формируемые с помощью тега
с помощью тега
Можно задать фон для любого количества столбцов;
с помощью селектора table td:first-child , table td:last-child можно задать стили для первого или последнего столбца таблицы (за исключением первой ячейки заголовка таблицы);
с помощью селектора table td:nth-child(правило отбора столбцов) можно задать стили для любых столбцов таблицы.
Подробнее про CSS-селекторы вы сможете прочитать .
5. Как добавить таблице заголовок
Добавить заголовок в таблицу можно с помощью тега
Company | Q1 | Q2 | Q3 | Q4 |
---|
6. Как убрать промежуток между рамками ячеек
Рамки ячеек таблицы по умолчанию разделены небольшим промежутком. Если задать для таблицы border-collapse: collapse , то промежуток уберётся. Свойство наследуется.
Синтаксис
Table {border-collapse: collapse;}
Рис. 3. Пример таблиц со сливающимися и раздельными рамками ячеек
7. Как увеличить промежуток между рамками ячеек
С помощью свойства border-spacing можно менять расстояние между рамками ячеек. Данное свойство применяется к таблице в целом. Наследуется.
Синтаксис
Table {border-collapse: separate; border-spacing: 10px 20px;} table {border-collapse: separate; border-spacing: 10px;} Рис. 4. Пример таблиц с увеличенными промежутками между рамками ячеек
8. Как скрыть пустые ячейки таблицы
Свойство empty-cells скрывает или показывает пустые ячейки. Действует только на ячейки, которые не содержат какой-либо контент. Если для ячейки задан фон, а для таблицы задано table {border-collapse: collapse;} , то ячейка не будет скрыта. Наследуется.
Company | Q1 | Q2 | Q3 |
---|---|---|---|
Microsoft | 20.3 | 30.5 | |
50.2 | 40.63 | 45.23 |
9. Компоновка макета таблицы с помощью свойства table-layout
Компоновка макета таблицы определяется одним из двух подходов: фиксированный макет или автоматический макет. Под компоновкой в данном случае подразумевается как распределяется ширина таблицы между шириной ячеек. Свойство не наследуется.
Синтаксис
Table {table-layout: fixed;}
10. Лучшие макеты таблиц
1. Горизонтальный минимализм
Горизонтальные таблицы — это таблицы, текст в которых читается по горизонтали. Каждая сущность представляет собой отдельную строку. Вы можете оформить подобные таблицы в минималистском стиле, поместив двухпиксельную границу под заголовком th .
Employee | Salary | Bonus | Supervisor |
---|---|---|---|
Stephen C. Cox | $300 | $50 | Bob |
Josephin Tan | $150 | - | Annie |
Joyce Ming | $200 | $35 | Andy |
James A. Pentel | $175 | $25 | Annie |
При большом количестве строк такой дизайн таблиц затрудняет их чтение. Для решения этой проблемы можно добавить однопиксельную границу под всеми элементами td .
Td { border-bottom: 1px solid #ccc; color: #669; padding: 9px 8px; transition: .3s linear; }/*остальной код - как в примере выше*/
Добавление эффекта:hover для элемента tr облегчит чтение таблиц, оформленных в минималистском стиле. При наведении курсора мыши на ячейку, остальные ячейки той же строки выделяются одновременно, что упрощает процесс отслеживания информации, если таблицы имеют несколько столбцов.
Th { font-weight: normal; color: #039; padding: 10px 15px; } td { color: #669; border-top: 1px solid #e8edff; padding: 10px 15px; } tr:hover td {background: #e8edff;}
2. Вертикальный минимализм
Несмотря на то, что подобные таблицы используются редко, тем не менее, вертикально ориентированные таблицы полезны для категоризации или сравнения описания объектов, представленных колонкой. Можно оформить их в минималистском стиле, добавив пробел, разделяющий столбцы.
Th { font-weight: normal; border-bottom: 2px solid #6678b1; border-right: 30px solid #fff; border-left: 30px solid #fff; color: #039; padding: 8px 2px; } td { border-right: 30px solid #fff; border-left: 30px solid #fff; color: #669; padding: 12px 2px; }
3. «Коробочный» стиль
Наиболее надежным стилем для оформления таблиц всех типов, является так называемый «коробочный» стиль. Достаточно подобрать хорошую цветовую гамму, а затем задать цвет фона для всех ячеек. Не забудьте подчеркнуть различие между строками, установив границы в качестве разделителя.
Th { font-size: 13px; font-weight: normal; background: #b9c9fe; border-top: 4px solid #aabcfe; border-bottom: 1px solid #fff; color: #039; padding: 8px; } td { background: #e8edff; border-bottom: 1px solid #fff; color: #669; border-top: 1px solid transparent; padding: 8px; } tr:hover td {background: #ccddff;}
Самое сложное — найти ту цветовую гамму, которая будет гармонично сочетаться с вашим сайтом. Если сайт нагружен по графике и дизайну, то вам будет довольно трудно использовать этот стиль.
Table { font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 14px; max-width: 70%; width: 70%; text-align: center; border-collapse: collapse; border-top: 7px solid #9baff1; border-bottom: 7px solid #9baff1; } th { font-size: 13px; font-weight: normal; background: #e8edff; border-right: 1px solid #9baff1; border-left: 1px solid #9baff1; color: #039; padding: 8px; } td { background: #e8edff; border-right: 1px solid #aabcfe; border-left: 1px solid #aabcfe; color: #669; padding: 8px; }
4. Горизонтальная зебра
Зебра-таблица выглядит довольно привлекательной и удобной. Дополнительный цвет фона может служить в качестве визуальной подсказки для людей при чтении таблицы.
Th { font-weight: normal; color: #039; padding: 10px 15px; } td { color: #669; border-top: 1px solid #e8edff; padding: 10px 15px; } tr:nth-child(2n) {background: #e8edff;}
5. Газетный стиль
Для достижения так называемого газетного эффекта, можно применить границы для элементов таблицы и поиграть с ячейками внутри. Легкий, минималистичный газетный стиль может выглядеть так: обыграйте цветовую гамму, добавьте границы, отступы, разные фоны, и эффект:hover при наведении на строку.
Table {border: 1px solid #69c;} th { font-weight: normal; color: #039; border-bottom: 1px dashed #69c; padding: 12px 17px; } td { color: #669; padding: 7px 17px; } tr:hover td {background: #ccddff;}
Table {border: 1px solid #69c;} th { font-weight: normal; color: #039; padding: 10px; } td { color: #669; border-top: 1px dashed #fff; padding: 10px; background:#ccddff; } tr:hover td {background: #99bcff;}
Table {border: 1px solid #6cf;} th { font-weight: normal; font-size: 13px; color: #039; text-transform: uppercase; border-right: 1px solid #0865c2; border-top: 1px solid #0865c2; border-left: 1px solid #0865c2; border-bottom: 1px solid #fff; padding: 20px; } td { color: #669; border-right: 1px dashed #6cf; padding: 10px 20px; }
6. Фон таблицы
Если вы ищете быстрый и уникальный способ оформления таблицы, выберите привлекательное изображение или фото, относящиеся к теме таблицы и установите ее фоном таблицы.
Jpg") no-repeat; background-position: 100% 55px; } th { font-weight: normal; color: #339; padding: 10px 12px; } td { background: url("https://сайт/images/back..png"); background: transparent; }
В этой лекции подробно рассматриваются принципы применения таблиц в HTML-разметке. Это и табличная организация текста, и табличная координатная сетка, и организованная в таблицы графика.
Средства описания таблиц в HTML
По мере развития WWW стало ясно, что средств, которые заложены в НТМL, недостаточно для качественного отображения различного типа документов. Недостатком НТМL было отсутствие в его составе средств отображения таблиц. Для этой цели обычно использовался предформатированный текст (тег
), в котором таблица обрисовывалась символами АSСII. Но такая форма представления таблиц была недостаточно высокого качества и выбивалась из общего стиля документа. После введения таблиц в HTML у Web-мастеров появился не просто инструмент для размещения текстовых и числовых данных, а мощное средство дизайна для размещения в нужном месте экрана графических образов и текста.Создание таблиц в HTML
Для описания таблиц используется тег <ТАВLЕ>. Тег <ТАВLЕ>, как и многие другие, автоматически переводит строку до и после таблицы.
Создание строки таблицы — тег <ТR>
Тег <ТR> (Таble Row, строка таблицы) создает строку таблицы. Весь текст, другие теги и атрибуты, которые требуется поместить в одну строку, должны размещаться между тегами lt;ТR>ТR>.
Определение ячеек таблицы — тег <ТD>
Внутри строки таблицы обычно размещаются ячейки с данными. Каждая ячейка, содержащая текст или изображение, должна быть окружена тегами <ТD>ТD>. Число тегов <ТD>ТD> в строке определяет число ячеек
Таблица
Если в таблице два тега TR, то в ней две строки. Если в строке три тега TD, то в ней три столбца. Заголовки столбцов таблицы — тег <ТН>
Заголовки для столбцов и строк таблицы задаются с помощью тега заголовка <ТН>ТН> (Таblе Неаder, заголовок таблицы). Эти теги подобны <ТD>ТD>. Отличие состоит в том, что текст, заключенный между тегами <ТН>ТН>, автоматически записывается жирным шрифтом и по умолчанию располагается посередине ячейки. Центрирование можно отменить и выровнять текст по левому или правому краю. Если воспользоваться <ТD>ТD> с тегом <В> и атрибутом <АLIGN=center>, текст тоже будет выглядеть как заголовок. Однако следует иметь в виду, что не все браузеры поддерживают в таблицах жирный шрифт, поэтому лучше задавать заголовки таблиц с помощью <ТН>.
Заголовок центрирован по умолчанию | Заголовок может объединять столбцы | |
---|---|---|
Заголовок может быть расположен перед столбцами | Текст или данные | Текст или данные |
Заголовок может объединять строки | Текст или данные | Текст или данные |
Текст или данные | Текст или данные | |
Текст или данные | Текст или данные |
Использование заголовков таблицы — тег <САРТIОN>
Тег
Текст или данные | Текст или данные | Текст или данные | Текст или данные |
Текст или данные | Текст или данные | Текст или данные |
Атрибут NOWRAP
Обычно любой текст, не помещающийся в одну строку ячейки таблицы, переходит на следующую строку. Однако при использовании атрибута NOWRAP с тегами <ТН> или <ТD> длина ячейки расширяется настолько, чтобы заключенный в ней текст поместился в одну строку.
Атрибут СОLSPAN
Теги <ТD> и <ТН> модифицируются с помощью атрибута СОLSPAN (Column Span, соединение столбцов). Если вы хотите сделать какую-нибудь ячейку шире, чем верхняя или нижняя, можно воспользоваться атрибутом СОLSPAN, чтобы растянуть ее над любым количеством обычных ячеек.
Если вы хотите сделать какую-нибудь ячейку шире, чем верхняя или нижняя, | можно воспользоваться атрибутом СОLSPAN=2, |
чтобы растянуть ее над любым количеством обычных ячеек. |
Атрибут ROWSPAN
Атрибут ROWSPAN, используемый в тегах <ТD> и <ТН>, подобен атрибуту СОLSPAN=, только он задает число строк, на которые растягивается ячейка. Если вы указали в атрибуте ROWSPAN=s число, большее единицы, то соответствующее количество строк должно находиться под растягиваемой ячейкой. Внизу таблицы ее поместить нельзя.
Атрибут WIDТН
Атрибут WIDТН применяется в двух случаях. Можно поместить его в тег <ТАВLЕ>, чтобы дать ширину всей таблицы, а можно использовать в тегах <ТD> или <ТН>, чтобы задать ширину ячейки или группы ячеек. Ширину можно указывать в пикселах или в процентах. Например, если вы задали в теге <ТАВLЕ> WIDTH=250, вы получите таблицу шириной 250 пикселов независимо от размера страницы на мониторе. При задании WIDТН=50% в теге <ТАВLЕ> таблица будет занимать половину ширины страницы при любом размере изображения на экране. Так что, указывая ширину таблицы в процентах, имейте в виду, что если у пользователя узкая область просмотра, ваша страница может выглядеть несколько странно. Если вы пользуетесь пикселами, и таблица оказывается шире области просмотра, внизу появится полоса прокрутки для перемещения вправо и влево по странице. В зависимости от поставленных задач и тот, и другой способ задания ширины таблицы может оказаться полезным.
Текст или данные - ширина 100% |
Текст или данные - ширина 50% |
Текст или данные - ширина 200 пикселов |
Текст или данные - ширина 100 пикселов |
Применение пустых ячеек
Если ячейка не содержит данных, она не будет иметь границ. Если требуется, чтобы у ячейки были границы, но не было содержимого, необходимо поместить в нее что-то, что не будет видно при просмотре. Можно воспользоваться пустой строкой <ВR>. Можно даже задать пустые столбцы, определив их ширину в пикселах или относительных единицах и не введя в полученные ячейки никаких данных. Это средство может оказаться полезным при размещении на странице текста и графики.
Атрибут СЕLLРАDDING
Данный атрибут определяет ширину пустого пространства между содержимым ячейки и ее границами, то есть задает поля внутри ячейки.
Текст или данные | Текст или данные | Текст или данные |
Текст или данные | Текст или данные | Текст или данные |
Текст или данные | Текст или данные | Текст или данные |
Текст или данные | Текст или данные | Текст или данные |
Атрибуты АLIGN и VALIGN
Теги <ТR>, <ТD> и <ТН> можно модифицировать с помощью атрибутов ALIGN и VALIGN. Атрибут АLIGN определяет выравнивание текста и графики по горизонтали, то есть по левому или правому краю, либо по центру. Горизонтальное выравнивание может быть задано несколькими способами:
ALIGN=blееdleft прижимает содержимое ячейки вплотную к левому краю.
ALIGN=left выравнивает содержимое ячейки по левому краю с учетом отступа, заданного атрибутом СЕLLPADDING.
АLIGN=сеnter располагает содержимое ячейки по центру.
АLIGN=right выравнивает содержимое ячейки по правому краю с учетом отступа, заданного атрибутом СЕLLPADDING.
Текст или данные | Текст или данные | Текст или данные |
Текст или данные | Текст или данные | Текст или данные |
Текст или данные | Текст или данные | Текст или данные |
Текст или данные | Текст или данные | Текст или данные |
Текст или данные | Текст или данные | Текст или данные |
Атрибут VALIGN осуществляет выравнивание текста и графики внутри ячейки по вертикали. Вертикальное выравнивание может быть задано несколькими способами:
VALIGN=top выравнивает содержимое ячейки по ее верхней границе.
VALIGN=middle центрирует содержимое ячейки по вертикали.
VALIGN=bottom выравнивает содержимое ячейки по ее нижней границе.
Атрибут VALIGN осуществляет выравнивание текста и графики внутри ячейки по вертикали. | верх, | середина, | низ. |
VALIGN=top Выравнивает содержимое ячейки по ее верхней границе. | верх, | верх, | верх. |
VALIGN=middle Центрирует содержимое ячейки по вертикали. | середина, | середина, | середина. |
VALIGN=bottom Выравнивает содержимое ячейки по ее нижней границе. | низ, | низ, | низ. |
Атрибут BORDER
В теге <ТАВLЕ> часто определяют, как будут выглядеть рамки, то есть линии, окружающие ячейки таблицы и саму таблицу. Если вы не зададите рамку, то получите таблицу без линий, но пространство под них будет отведено. Того же результата можно добиться, задав <ТАВLЕ ВОRDER=0>. Иногда хочется сделать границу потолще, чтобы она лучше выделялась. Можно для привлечения внимания к рисунку или тексту задать исключительно жирные границы. При создании вложенных таблиц приходится делать для разных таблиц границы различной толщины, чтобы их легче было различать.
Атрибут CELLSPACING
Атрибут СЕLLSPACING определяет ширину промежутков между ячейками в пикселах. Если этот атрибут не указан, по умолчанию задается величина, равная двум пикселам. С помощью атрибута СЕLLSPACING= можно размещать текст и графику там, где вам нужно. Если вы хотите оставить пустое место, можно вписать в ячейку пробел.
Текст или данные | Текст или данные | Текст или данные |
Текст или данные | Текст или данные | Текст или данные |
Текст или данные | Текст или данные | Текст или данные |
Текст или данные | Текст или данные | Текст или данные |
Текст или данные | Текст или данные | Текст или данные |
Текст или данные | Текст или данные |
Атрибут BGCOLOR
Данный атрибут позволяет установить цвет фона. В зависимости от того, с каким тегом (TABLE, TR, TD) он применяется, цвет фона может быть установлен для всей таблицы, для строки или для отдельной ячейки. Значением данного атрибута является RGB-код или стандартное название цвета.
Текст или данные | Текст или данные | Текст или данные |
Текст или данные | Текст или данные | Текст или данные |
Атрибут BACKGROUND
Данный атрибут задает фоновое изображение для таблиц. Применим к тегам TABLE и TD. Его значением является URL файла с фоновым изображением. Применение этого атрибута рассматривается ниже.
Использование таблиц в дизайне страницы
Таблицы хороши тем, что при желании можно сделать их границы невидимыми. Это позволяет с помощью тега <ТАВLЕ> красиво размещать на странице текст и графику. Пока тег <ТАВLЕ> остается единственным мощным средством форматирования в HTML. Дизайнеры Web-страниц сейчас обладают практически той же свободой в отношении использования «пустого пространства», что и создатели печатных страниц. Таблицы лучше всего помогают отойти от иерархического размещения текста на Web-страницах.
Если браузер поддерживает таблицы, он обычно правильно отображает наиболее интересные эффекты, полученные с их помощью
Уральский государственный педагогический университетДобро пожаловать!
|
Использование таблиц в дизайне
Создание разноцветных таблиц
Некоторые браузеры позволяют отображать цвета. Есть несколько способов раскрасить таблицу, в основном они зависят от используемого браузера.
Цветные границы в Netscape Navigator. Вы не только можете окружить таблицу красивой рамкой, но еще и задать для нее цвет, отличный от цветов текста и фона. Создайте простой серый GIF (или любой GIF, который вы хотели бы иметь в качестве фона) и определите его в теге <ВODY> как фон страницы. Затем задайте цвет фона страницы. В результате ваш тег <ВОDY> будет выглядеть примерно так:
Вы создали двойной фон — GIF и заданный цвет. В результате фоновый цвет будет виден на всех границах таблиц и горизонтальных линиях (<НR>). Вне зависимости от того, является ваш фоновый GIF серым или нет, цветные линии и границы таблиц будут заметно выделяться. Если фоновый GIF устроен не слишком сложно, время загрузки страницы возрастет лишь немного.
HTML-таблицы упорядочивают и выводят на экран данные с помощью строк или столбцов. Таблицы состоят из ячеек, образующихся при пересечении строк и столбцов. Ячейки таблиц могут содержать любые HTML-элементы, такие как заголовки, списки, текст, изображения, элементы форм, а также другие таблицы. Каждой таблице можно добавить связанный с ней заголовок, расположив его перед таблицей или после неё.
Таблицы больше не используются для вёрстки веб-страниц и компоновки отдельных элементов, потому что такой приём не обеспечивает гибкость структуры и адаптивность сайта, существенно увеличивая HTML-разметку.
Для всех элементов таблицы доступны , а также собственные атрибуты.
Создание таблиц в HTML
- Содержание:
1. Как создать таблицу
Таблица создаётся при помощи парного тега
Рис.1. Внешний вид таблицы без форматирования css-свойствамиПо умолчанию таблица и ячейки не имеют видимых границ. Границы задаются с помощью свойства border:
/* внешние границы таблицы серого цвета толщиной 1px */ table {border: 1px solid grey;} /* границы ячеек первого ряда таблицы */ th {border: 1px solid grey;} /* границы ячеек тела таблицы */ td {border: 1px solid grey;}
Промежутки между ячейками таблицы убираются с помощью свойства table {border-collapse: collapse;} .
Ширина таблицы по умолчанию равна ширине её внутреннего содержимого. Чтобы установить ширину, нужно задать значение для свойства width:
/* сделает ширину таблицы равной ширине блока контейнера, в котором она находится */ table {width: 100%;} /* задаст фиксированную ширину для таблицы */ table {width: 600px;}
Если для ячеек таблицы заданы внутренние отступы и границы, то ширина таблицы будет включать в себя следующие значения:
padding-left и padding-right , ширина border-left плюс ширина border-right последней ячейки в ряду. Если заданы ширина и границы ячеек, то ширина таблицы будет складываться из ширины ячеек плюс ширина border-left и ширина border-right последней ячейки в ряду.
2. Как создать строки (ряды) таблицы
Строки или ряды таблицы создаются с помощью тега
3. Как сделать ячейку заголовка столбца таблицы
4. Как сделать ячейку тела таблицы
5. Как добавить подпись (заголовок) к таблице
Создает подпись таблицы. Добавляется непосредственно после тега
6. Группирование строк и столбцов таблицы
Создает структурную группу столбцов, выделяя логически однородные ячейки. Группирует один или более столбцов для единого форматирования, позволяя применить стили к столбцам вместо того, чтобы повторять стили для каждой ячейки и для каждой строки. Добавляется непосредственно после тегов Рис. 2. Выделение столбцов таблицы другим цветом с использованием тегов и
7. Группировка разделов таблицы
Элемент создает группу заголовков для строк таблицы с целью задания единого оформления. Используется в сочетании с элементами
Элемент должен быть использован в следующем порядке: как дочерний элемент
Атрибут | Описание, принимаемое значение | |||
---|---|---|---|---|
colspan | Количество ячеек в строке для объединения по горизонтали. | |
||
headers | Задает список ячеек заголовка, содержащих информацию о заголовке текущей ячейки данных. Предназначен для речевых браузеров. | ... | ... | |
rowspan | Количество ячеек в столбце для объединения по вертикали. | Возможные значения: число от 1 до 999. |
||
span | Количество колонок, объединяемых для задания единого стиля, по умолчанию равно 1. Принимаемые значения: любое целое положительное число. |
10. Пример создания таблицы
Рис. 4. Создание меню ресторана с помощью HTML-таблицы
Разметка HTML
Кухня | Холодные блюда | Горячие блюда | Десерты | ||
---|---|---|---|---|---|
Салаты | Закуски | Первые блюда | Вторые блюда | ||
Русская | Винегрет | Язык с хреном | Щи с квашеной капустой | Вареники с картошкой | Печеные яблоки с медом |
Оливье | Студень говяжий | Рассольник домашний | Караси запеченые в сметане | Блинчатый пирог | |
Сельдь под "шубой" | Судак заливной | Мясная солянка | Котлеты "Пожарские" | Пирожное "Картошка" | |
Испанская | Севиче из гребешков | Эмпанадас | Хлебный суп с чесноком | Паэлья с морепродуктами | Чуррос |
Тимбал из авокадо и тунца | Ахотомате | Астурийская фабада | Свиное раксо | Альмойшавена | |
Фасоль с ветчиной | Чанфайна | Рыбный суп с манными клецками | Тортилья картофельная | Бунуэлос | |
Французская | Вогезский салат | Рийет из курицы | Баклажанный крем-суп "Ренуар" | Картофель огратен | Бриоши |
Салат "Панзанелла" | Делисьез из сыра | Французский тыквенный суп | Гратин из птицы | Лигурийский лимонный пирог | |
Тар-тар | Маринованный лосось | Суп "Конти" | Тартифлетт | Саварен "Триумф" |
Создадим простейшую таблицу:
Модель | Компания | Цена |
Nexus 6P | Huawei | 49000 |
iPhone 6S PLus | Apple | 62000 |
Lumia 950 XL | Microsoft | 35000 |
Здесь у нас в таблице 4 строки, и каждая строка имеет по три столбца.
При этом в данном случае первая строка выполняет роль заголовка, а остальные три строки собственно являются содержимым таблицы. Разделения заголовков, футера и тела таблицы в html предусмотрены соответственно элементы thead , tfoot и tbody . Для их применения изменим таблицу следующим образом:
Модель | Компания | Цена |
---|---|---|
Nexus 6P | Huawei | 49000 |
iPhone 6S PLus | Apple | 62000 |
Lumia 950 XL | Microsoft | 35000 |
Информация по состоянию на 17 марта |
В элемент thead заключается строка заголовков. Для ячеек заголовок используется не элемент td , а th . Элемент th выделяет заголовок жирным. А все остальные строки заключаются в tbody
Элемент tfoot определяет подвал таблицы или футер. Здесь обычно выводится некоторая вспомогательная информация по отношению к таблице.
Кроме собственно заголовоков столбцов с помощью элемента caption мы можем задать общий заголовок для таблицы.
Также стоит отметить, что футер таблицы содержит только один столбец, который раздвигается по ширине трех столбцов с помощью атрибута colspan="3" .
Атрибут colspan указывает на какое количество столбцов раздвигается данная ячейка. Также с помощью атрибута rowspan мы можем раздвигать ячейку на определенное количество строк. Например:
1 | 2 | 3 |
4 | 5 | |
6 | 7 |
Есть три элемента, которые должна содержать каждая таблица: table , tr и td . Есть и другие элементы, и я объясню их позже в этой главе, но начинать нужно с этих трех. Первый элемент, table , является сердцем поддержки табличного контента в HTML и обозначает таблицу в HTML документе. В представлен элемент table .
Таблица 11-2: Элемент table
Следующим основным элементом таблицы (table) является tr , который обозначает строку таблицы. В HTML таблицах строки играют большую роль, чем столбцы, и каждая строка должна быть обозначена отдельно. В представлен элемент tr .
Таблица 11-3: Элемент tr
Последним из трех основных элементов является td , который обозначает ячейку таблицы. В представлен элемент td .
Таблица 11-4: Элемент td
После определения этих трех элементов их можно объединить и создать таблицу, как показано в .
Листинг 11-1: Использование элементов table , tr и td для создания таблицы
Apples | Green | Medium |
Oranges | Orange | Large |
В этом примере я определил элемент table , в котором есть две строки (обозначаются двумя элементами tr). Каждая строка состоит из трех столбцов, каждый из которых представлен элементом td . Элемент td может содержать любой потоковый контент, но в этом примере я вставил туда простой текст. На вы можете видеть, как отображается таблица со стилями по умолчанию.
Рисунок 11-1: Отображение простой таблицы
Это очень простая таблица, но вы можете увидеть в ней основную структуру. Браузер отвечает за размеры строк и столбцов для поддержки таблицы. В качестве примера я добавил в таблицу больше контента, как показано в .
Листинг 11-2: Больше контента в ячейках таблицы
Apples | Green | Medium |
Oranges | Orange | Large |
Pomegranate | A kind of greeny-red | Varies from medium to large |
В каждом из вновь добавленных элементов td содержания больше, чем в двух предыдущих рядах. Вы можете увидеть, как браузер меняет другие ячейки, чтобы сделать их одинакового размера, что показано на