Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Html оформление таблицы: Оформление таблиц | htmlbook.ru

On

Html оформление таблицы: Оформление таблиц | htmlbook.ru

By alexxlab

Содержание

CSS оформление таблиц — ширина, высота, выравнивание, размер и другие параметры

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

width и height

Задают соответственно ширину и высоту таблицы. Без этих свойств параметры определяются автоматически и зависят от содержимого контейнера <table>. Значения устанавливаются в любых единицах длины CSS, но зачастую используются пиксели (px) и проценты (%). Последние настраивают ширину относительно родительского элемента, первые же задают абсолютную величину.

table {width: 450px; height: 80%;}

caption-side

Указывает, где будет размещён заголовок таблицы, описанный тегом <caption>. Свойству можно задавать значения:

  • top — расположить над таблицей.
  • bottom — разместить под таблицей.

Эксклюзивно для обозревателя Firefox доступны значения left (заголовок слева) и right (справа от таблицы), но другие браузеры их не понимают.

table {caption-side: top;}

border-collapse

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

Так рамки ячеек отображаются по умолчанию. Правило border-collapse: separate; даёт такой же эффект. Чтобы решить проблему, нужно объявить border-collapse: collapse; (результат показан на рисунке ниже).

border-spacing

Определяет расстояние между границами ячеек. Правило задаётся сразу для всей таблицы. Если значение одно, то оно установит расстояние и по горизонтали, и по вертикали. Если значения два, то первое задаст расстояние по горизонтали, второе — по вертикали. Свойство несовместимо с правилом table {border-collapse: collapse;}.

CSS-код

   table { 
    border: 4px double #FCA360;
    border-collapse: separate;
    border-spacing: 10px 20px;
   }
   td {
    padding: 3px;
    border: 1px solid #FCA360;
   }

Задаёт таблице следующее оформление:

empty-cells

Указывает, будет ли отображаться фон и границы ячейки, если она пуста. Значение у свойства может быть одно из двух:

  • show — показывать границы и фон (по умолчанию).
  • hide — скрыть их. Если все ячейки строки пусты, то будет скрыта, соответственно, вся строка. Если таблице задано правило border-collapse: collapse;, то свойство игнорируется.

table-layout

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

  • auto. Ширина определяется автоматически. При этом либо суммируется ширина всех столбцов, либо берётся значение свойства width, если таблице оно задано. Браузер сначала загружает таблицу, потом анализирует её, определяя ширину, и только после этого отображает.
  • fixed. Фиксированная ширина, которая определяется по первой строке.

Пример оформления таблицы

Не забывайте, что таблице можно задавать и другие универсальные правила, например, как мы это делали с высотой (height) и шириной (width).

Помня это, оформим несложную таблицу, частично прокомментировав код.

<!DOCTYPE html>
<html>
 <head>
  <title>border-collapse</title>
  <style>
   table {
    width: 50%;
    caption-side: bottom;
    border: 4px solid #006400;
    border-collapse: collapse;
    table-layout: fixed;
   }
   th {
    font-size: 13px;
    font-weight: bold;
    background: #ADFF2F;
    border-top: 4px solid #006400;
    border-bottom: 3px solid #FF8C00;
    color: #039;
    padding: 8px;
   }
   td {
    background: #E0FFFF;
    border-bottom: 1px solid #FF8C00;
    border-top: 1px solid transparent;
    padding: 8px;
   </style>
 </head>
 <body>   
  <table>
   <caption>Пример таблицы</caption>
   <tr> 
    <th>Цены</th><th>2014</th>
    <th>2015</th><th>2016</th>
   </tr>
   <tr> 
    <td>Хлеб</td><td>16</td>
    <td>18</td><td>21</td>
   </tr>
   <tr> 
    <td>Сахар</td><td>35</td>
    <td>44</td><td>50</td>
   </tr>
   <tr> 
    <td>Соль</td><td>8</td>
    <td>8,50</td><td>9</td>
   </tr>
  </table> 
 </body>
</html>

В браузере таблица будет выглядеть, как показано ниже.

width: 50%;

Задаём ширину таблицы в половину от родительской. 50% берётся от ширины контейнера <body>, потому что других родителей у неё нет. То есть таблица будет занимать ровно половину окна браузера.

caption-side: bottom;

Размещаем заголовок снизу, под таблицей.

border: 4px solid #006400;

Задаём таблице цветную рамку толщиной 4 пикселя.

border-collapse: collapse;

Объединяем границы ячеек.

table-layout: fixed;

Настраиваем способ определения браузером ширины таблицы.

font-size: 13px;

Задаём размер шрифта заглавных ячеек.

font-weight: bold;

Делаем текст внутри них жирным.

background: #ADFF2F;

Устанавливаем цвет фона ячеек.

border-top: 4px solid #006400; border-bottom: 3px solid #FF8C00;

Настраиваем верхние и нижние рамки.

color: #039;

Определяем цвет текста.

padding: 8px;

Задаём расстояние от содержимого ячеек до их границ равным восьми пикселям.

Полезные ссылки:

Оформление таблицы в html/css — CodeRoad

Как вы думаете, какой самый логичный и эффективный способ стилизовать таблицу в HTML/CSS?
Я видел много людей, использующих свойства HTML в своем коде, например

<table cellspacing="2" border="0">
    <tr>
        <td align="right" nowrap="nowrap">
        </td>
    </tr>
</table>

Не проще ли было бы дать table s и td s classe s/ id s и отформатировать их во внешней таблице стилей?

html

css

html-table

frontend

Поделиться

Источник


somazo    

03 сентября 2015 в 12:23

5 ответов

  • Linethrough/зачеркивание всей строки таблицы HTML

    После некоторых исследований я не смог найти ответа на этот вопрос. Это было так , но на самом деле это не ответ на мой вопрос. Я хотел бы strikethrough полную строку таблицы HTML в CSS, а не только текст в ней. Возможно ли это вообще? Из примера, который я привел, кажется, что стиль tr даже не…

  • Оформление таблиц в css

    Привет, я работаю с JQuery fullCalendar в Angularjs и нуждаюсь в некоторой помощи с некоторым стилем таблицы. Fullcalendar использует свой собственный файл css из плагина, который можно увидеть здесь . Проблема в том, что в проекте/веб-сайте есть и другие таблицы стилей, среди них таблица стилей,…


1

Это не только было бы лучше, но и правильный способ сделать это. Код, который у вас сейчас есть, — это не то, что вам нужно на производственном сайте.

Поделиться


John Halbert    

03 сентября 2015 в 12:29

Поделиться


Lukáš Gibo Vaic    

03 сентября 2015 в 12:28


0

Да, Так и будет.

Однако, когда HTML только строился, CSS был не так удобен, как сейчас. С возможностями CSS сегодня я бы рекомендовал создать начальный макет с тегами HTML и оставить любые атрибуты стиля (например, выравнивание, перенос текста, граница и т. Д.) В таблице стилей CSS.

Хороший Вопрос!

Поделиться


Jacob Morris    

03 сентября 2015 в 12:30

  • Оформление текста в HTML Email (без ссылки)

    Хорошо, я работаю над довольно простым HTML email. Все, что я хотел бы, — это чтобы цвет подчеркивания отображался на всех клиентах email одинаково. Мне бы хотелось, чтобы он был белым. Однако на некоторых клиентах email (в основном на продуктах apple)он отображается черным. Я использовал атрибут…

  • цвет-это переопределение, и все же текстовое оформление в css

    Я пробовал псевдокод для якорного тега в css, то есть ссылка, посещенный, наведенный и активный. В html является: <a href=https://www.w3schools.com/html/ target=_blank> w3school </a> а css-это: a:link { color: blue; text-decoration: overline underline; } a:visited { color: green;…


0

есть много способов, с помощью которых вы можете оформить свой стол.

  1. встроенный Css
  2. внутренний CSs
  3. Внешний Css(В основном предпочитаемый)
  4. SASS(используйте Миксин)
  5. LESS
  6. Компас

Поделиться


Pardeep Jain    

03 сентября 2015 в 12:41


0

Лучший и простой способ стилизовать таблицу-использовать CSS . Вы можете увидеть пример кода ниже;

Код:

<style>
 .my_table{
     border:2px solid blue;
     width:50%;
     padding:5px;
 }
</style>
<table border="1">
 <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
 </tr>
 <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
 </tr>

Поделиться


Ron    

03 сентября 2015 в 13:03

Похожие вопросы:

Почему это css не удаляет текстовое оформление?

У меня есть должность, которая имеет название. Я выбираю вот так => <h5><strong><%= link_to post.title, post, :class => post-title %></strong></h5> Я хочу убрать…

Css: img граница и текстовое оформление

Я пытаюсь исправить проблему границы изображения IE, имея текстовое оформление при наведении ссылки. проблема с границей исправлена, но украшение исчезло. <a href=home.php class=menu-links>…

CSS форматирование таблицы в HTML Table

Я пытаюсь обеспечить форматирование CSS для двух таблиц HTML, но не могу. Я настраиваю веб-страницу в HTML & CSS (с CSS на внешнем листе), и макет веб-сайта зависит от таблиц. Есть 2 стола, один…

Linethrough/зачеркивание всей строки таблицы HTML

После некоторых исследований я не смог найти ответа на этот вопрос. Это было так , но на самом деле это не ответ на мой вопрос. Я хотел бы strikethrough полную строку таблицы HTML в CSS, а не только…

Оформление таблиц в css

Привет, я работаю с JQuery fullCalendar в Angularjs и нуждаюсь в некоторой помощи с некоторым стилем таблицы. Fullcalendar использует свой собственный файл css из плагина, который можно увидеть…

Оформление текста в HTML Email (без ссылки)

Хорошо, я работаю над довольно простым HTML email. Все, что я хотел бы, — это чтобы цвет подчеркивания отображался на всех клиентах email одинаково. Мне бы хотелось, чтобы он был белым. Однако на…

цвет-это переопределение, и все же текстовое оформление в css

Я пробовал псевдокод для якорного тега в css, то есть ссылка, посещенный, наведенный и активный. В html является: <a href=https://www.w3schools.com/html/ target=_blank> w3school </a> а…

текстовое оформление в css работает не так, как должно

Я использую этот код для реализации текстовых различий в javascript. Код работает нормально. Затем я попытался добавить текстовое оформление, чтобы иметь строку над неправильными частями…

Отображение Css стилизованных Html данных на ListView в Android

Итак, я хочу отобразить большую строку html, которая включает в себя css (размер шрифта, цвет, семейство шрифтов, оформление текста и т. д.) по частям на ListView . Я знаю, что есть некоторые…

почему текстовое оформление не работает в этой ситуации?

Знаете ли вы причину, по которой текстовое оформление не работает в этом случае? #menu { text-decoration: none; } <div> <a href=’1.html’>Home</a> <a…

Создание таблиц. Урок HTML

Содержание:

Для создания таблиц используется основной тег Table, в котором поочерёдно размещают строки Tr, а в каждой строке помещаются ячейки Td. Формирование таблиц в html — процесс довольно несложный.

Рассмотрим создание таблицы, для начала — самой простой (вид в браузере → код):

Для того чтобы таблица отображалась с рамкой, в тег Table просто добавляем атрибут border с шириной 2px. Существующие в html атрибуты позволяют оформить внешний вид таблицы, или её отдельных ячеек. Основные из них мы будем использовать в уроке.

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

Не так сложно создать таблицу и с объединёнными ячейками. Для этого в теге Td используются атрибуты colspan и rowspan, которые служат для объединения ячеек по горизонтали и вертикали соответственно. Возьмём и усложним наш пример следующим образом:

Вначале, добавляем третью строку. Затем объединяем ячейки 1.1 и 1.2: к первой добавляем атрибут colspan со значением «2», а вторую удаляем из кода. Если значением атрибута было бы «3», то объединились бы три ячейки, а код ячейки 1.3 нужно было бы удалить.

Аналогично выглядит объединённые по вертикали ячейки 2.3 и 3.3, последняя изъята из кода. А для первой применили атрибут rowspan. Как вы заметили, мы определили ширину таблицы в % — половину от ширины страницы, добавив к тегу Table атрибут width. Осталось узнать об остальных атрибутах тегов, формирующих таблицу.

Оформление таблиц

Нужно сказать, что для оформления «шапки» таблицы существует тег Th. Он заменяет тег Td и создаёт заголовочную ячейку для колонки, выделяя её содержимое жирным шрифтом и центрируя текст. Для демонстрации возможностей оформления таблиц возьмём предыдущий пример и оснастим некоторые теги дополнительными атрибутами:

Перечислю их, а подробнее в справочнике html. Выровнять содержимое ячеек помогут атрибуты align и valign — по горизонтали и вертикали. Они применимы и для строк Tr, а align и для тега Table, т.е. для всей таблицы. Высоту ячейки, а, следовательно, строки, задаёт height, а фон — bgcolor.

Естественно, что оформлять внешний вид таблиц лучше через свойства css. Например, text-align и vertical-align послужат для выравнивания содержимого. Свойства margin и padding зададут поля и отступы, вместо аналогичных атрибутов cellspacing и cellpadding тега Table. Это же касается цвета, фона и размеров. Стили css позволяют добиться более значимых эффектов.

Использовать таблицы нужно умеренно — только там, где это действительно необходимо. Не следует использовать несовременную «табличную» вёрстку страниц, браузеры отображают их медленно из-за громоздкости табличного кода. Одобрительного отношения поисковых систем добиваются ресурсы с высокой скоростью загрузки.

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

Содержание:

Поделиться с друзьями:

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

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

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

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

1
2
3
4
5

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

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

Результат:

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

1
2
3
4
5

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

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

Результат:

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

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

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

align left — таблица влево;
center – табл. по центру;
right — табл. вправо.
width 400
50%
bоrdеr ширина
bordercolor цвета рамки
сеllspacing ширина грани рамки
cellpadding внутреннее расстояние до рамки
bgсоlоr Цвет
#rrggbb
bасkground файл (фон таблицы)

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

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

alignleft, center, rightвыравнивание по горизонтали
valigntop, middle, bottom, baselineвыравнивание по вертикали
bgcolorцветзадний фон
bordercolorцветцвет границы

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

alignleft, center, rightвыравнивание по горизонтали
valigntop, middle, bottom, baselineвыравнивание по вертикали
widthчисло или процентширина ячейки
bgcolorцветцвет фона
backgroundфайлфайл фона
bordercolorцветцвет границы
nowrapзаставляет текст внутри ячейки отображаться без переносов, одной сплошной строкой

Важно:

  • Тег 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>

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

Таблица с областями группировки
Столбец 1Столбец 2Столбец 3Столбец 4
Строка2 Ячейка1Строка2 Ячейка2Строка2 Ячейка3Строка2 Ячейка4
Строка3 Ячейка1Строка3 Ячейка2Строка3 Ячейка3Строка3 Ячейка4
Строка4 Ячейка1Строка4 Ячейка2Строка4 Ячейка3Строка4 Ячейка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>

<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>

<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>

<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>

<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

align выравнивание содержимого столбца

  1. left — по левому краю (по умолчанию)
  2. center — по центру
  3. right — по правому краю

не работает в Firefox

dir определяет направление символов:

  1. ltr — слева направо
  2. rtl — справа налево

не работает в Firefox

span количество столбцов, к которым будет применяться оформление (по умолчанию 1)
style задает встроенную таблицу стилей
valign вертикальное выравнивание в ячейке таблицы

  1. bottom — по нижнему краю ячейки
  2. middle — по центру ячейки (по умолчанию)
  3. top — по верхнему краю ячейки

не работает в Firefox

width ширина столбца

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>

<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:

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

Таблицы | Создание таблиц | bookhtml.ru

Таблицы HTML создаются в четыре этапа.

На первом этапе в HTML-коде с помощью парного тега <TABLE> формируют саму таблицу:

<TABLE>
</TABLE>

Таблица HTML представляет собой блочный элемент Web-страницы. Это значит, что она размещается отдельно от всех остальных блочных элементов: абзацев, заголовков, больших цитат, аудио- и видеороликов. Так что вставить таблицу в абзац мы не сможем. (Нужно сказать, что таблица в абзаце выглядела бы, по меньшей мере, странно…)

На втором этапе формируют строки таблицы. Для этого предусмотрены парные теги <TR>; каждый такой тег создает отдельную строку. Теги <TR> помещают внутрь тега <TABLE> (листинг 5.1).

На третьем этапе создают ячейки таблицы, для чего используют парные теги <TD> и <TH>. Тег <TD> создает обычную ячейку, а тег <TH> — ячейку заголовка, в которой будет помещаться «шапка» соответствующего столбца таблицы. Теги <TD> и <TH> помещают в теги <TR>, создающие строки таблицы, в которых должны находиться эти ячейки (листинг 5.2).

На четвертом, последнем, этапе указывают содержимое ячеек, которое помещают в соответствующие теги <TD> и <TH> (листинг 5.3).

Если нам нужно поместить в ячейку таблицы простой текст, мы можем просто вставить его в соответствующий тег <TD> или <TH> (как показано в листинге 5.3). При этом заключать его в теги, создающие блочные элементы, необязательно.

Если нам потребуется как-то оформить содержимое ячеек, мы применим изученные в главе 3 теги. Например, мы можем придать номерам ячеек особую важность, воспользовавшись тегом <EM>; в результате они будут выведены курсивом (листинг 5.4).

Еще мы можем поместить в ячейку графическое изображение:

<TD><IMG SRC=»picture.jpg» ALT=»Картинка в ячейке таблицы»></TD>

Но часто бывает необходимо поместить в ячейку таблицы большой текст, иногда состоящий из нескольких абзацев. В таком случае пригодятся знакомые нам по главе 2 теги, создающие блочные элементы страницы. Теги <TD> и <TH> это позволяют (листинг 5.5).

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

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

Теперь настала пора рассмотреть правила, которыми руководствуются Web-обозреватели при выводе таблиц на экран.

— Таблица представляет собой блочный элемент Web-страницы (об этом мы уже говорили).

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

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

— Текст ячеек заголовка выводится полужирным шрифтом и выравнивается по центру.

— Рамки вокруг всей таблицы и вокруг отдельных ее ячеек не рисуются.

Таблица — всего лишь содержимое Web-страницы, а за ее вывод «отвечает» представление. (Подробнее о содержимом и представлении Web-страницы см. в главе 1.) Если нам нужно, например, вывести вокруг таблицы рамку, мы сможем создать соответствующее представление. Этим мы и займемся в части II.

И еще несколько правил, согласно которым создается HTML-код таблиц. Если их нарушить, Web-обозреватель отобразит таблицу некорректно или не выведет ее вообще.

— Тег <TR> может находиться только внутри тега <TABLE>. Любое другое содержимое тега <TABLE> (кроме заголовка и секций таблицы, речь о которых пойдет далее) будет проигнорировано.

— Теги <TD> и <TH> могут находиться только внутри тега <TR>. Любое другое содержимое тега <TR> будет проигнорировано.

— Содержимое таблицы может находиться только в тегах <TD> и <TH>.

— Ячейки таблицы должны иметь хоть какие-то содержимое, иначе Web-обозреватель может их вообще не отобразить. Если же какая-то ячейка должна быть пустой, в нее следует поместить неразрывный пробел (HTML-литерал &nbsp;).

Все, с теорией покончено. Настала пора практики. Давайте поместим на Web-страницу index.htm таблицу, перечисляющую все версии языка HTML с указанием года выхода. Вставим ее после цитаты из Википедии и отделяющей ее горизонтальной линии.

Листинг 5.6 содержит фрагмент HTML-кода Web-страницы index.htm, создающий такую таблицу.

Сохраним Web-страницу и откроем в Web-обозревателе (рис. 5.1).

Как видим, наша первая таблица не очень презентабельна. Web-обозреватель сделал ее сжатой, без рамок, с маленькими отступами между ячейками. Ну да это дело поправимое — прочитав часть II, мы сможем оформить таблицу (и другие элементы Web-страницы) как пожелаем.





Красивое оформление таблиц на CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<html>
<head>
    <title>Главная</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div>
        <table>
            <tr>
                <td>iaculis</td>
                <td>adipiscing</td>
                <td>pretium</td>
                <td>egestas</td>
            </tr>
            <tr>
                <td>placerat</td>
                <td>luctus</td>
                <td>tristique</td>
                <td>dignissim</td>
            </tr>
            <tr>
                <td>dictum</td>
                <td>tincidunt</td>
                <td>velit</td>
                <td>mauris</td>
            </tr>
        </table>
    </div>
</body>
</html>

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

table{
    border-collapse:collapse; /* убираем двойную границу между ячейками */
}
 
td, th{
    padding:10px; /* внутренние отступы для тега заголовка(th) таблицы и ячейки(td) в 10 пикселей(px) */
    border:1px solid #cccccc; /* серая граница для тега заголовка и ячейки */
}
 
th{
    background-color:#C1D3FF; /* голубой цвет фона заголовка(th) */
}