Пример таблицы html: html код таблицы — Примеры

HTML таблицы — окончание

Итак, вы думаете, что знаете, как создать HTML таблицу. Наверняка вам знакомы теги <table>, <tr>, <td> и <th>. Наверное вы даже можете создавать более сложные таблицы при помощи атрибутов rowspan и colspan. Тогда вы действительно кое-что умеете. А хотелось бы вам уметь еще больше? Тогда продолжим.

Столбцы наносят ответный удар

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

К счастью положение спасают тег <colgroup> и тег <col>.

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

Вот пример использования этих тегов:

<table>
   <colgroup>
      <col />
      <col />
      <col />
   </colgroup>
   <tr>
      <td>Это</td>
      <td>То</td>
      <td>Другое</td>
   </tr>
   <tr>
      <td>Птичка</td>
      <td>Крокодил</td>
      <td>Завтрак</td>
   </tr>
</table>

Стили класса «alternate» будут применяться ко второму столбцу или ко второй ячейке каждой строки.

В тегах <colgroup> и <col> можно также использовать атрибут span, который работает так же как rowspan и colspan. Использование этого атрибута в теге <colgroup> будет определять количество строк, к которым будет относиться эта группа, например, <colgroup span=»2″></colgroup> сгруппирует первые два столбца. При использовании этого атрибута с тегом <colgroup> тег <col> не используется.

Использование атрибута span в теге <col> более целесообразно. Например, в коде предыдущего примера его можно применить следующим образом:

<table>
   <colgroup>
      <col />
      <col span="2" />
   </colgroup>
...

В результате класс «alternate» будет применен к последним двум столбцам.

Да, но здесь должна быть какая-нибудь особенность, не так ли? Конечно есть. И вот она: К столбцам применимы только следующие стили – border, background, width и visibility.

Описание и заглавие

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

Описание таблицы определяется при помощи атрибута summary, который задается в открывающем теге <table>. Описание не отображается браузером, однако помогает в невизуальном представлении таблицы.

Тег <caption>, место которого сразу же после открывающего тега <table>, определяет заглавие таблицы. По умолчанию заглавие отображается над таблицей, однако при помощи CSS свойства caption-side может принимать положение

top, right, bottom или left, хотя IE обо всем этом не имеет никакого понятия.

<table summary="Брачные привычки цикад, демонстрирующие особенности по сравнению с саранчой">
   <caption>Брачные особенности цикад</caption>
. ..

Заголовки, нижние колонтитулы и прокрутка таблиц

Тег <thead>, тег <tfoot> и тег <tbody> позволяют разделять таблицу на заголовок, нижний колонтитул и тело. Это особенно полезно, когда таблицы имеют очень большой размер и когда (например, при распечатывании на принтере) необходимо, чтобы заголовок и нижний колонтитул появлялись на каждой странице.

Эти элементы должны определятся в следующем порядке: <thead> – <tfoot> – <tbody>

.

<table>
   <thead>
      <tr>
         <td>Заголовок 1</td>
         <td>Заголовок 2</td>
         <td>Заголовок 3</td>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <td>Нижний колонтитул 1</td>
         <td>Нижний колонтитул 2</td>
         <td>Нижний колонтитул 3</td>
      </tr>
   </tfoot>
   <tbody>
      <tr>
         <td>Ячейка 1</td>
         <td>Ячейка 2</td>
         <td>Ячейка 3</td>
      </tr>
      . ..
   </tbody>
</table>

Определив стиль «overflow: auto; max-height: [любое значение];«, можно сделать элемент <tbody> прокручиваемым в браузерах Mozilla. При этом заголовок и нижний колонтитул будут оставаться на месте, а справа от тела таблицы появится полоса прокрутки. Свойство max-height используется из-за того, что IE не распознает его, и поэтому оно безопаснее свойства height, которое IE присвоит каждой строке.

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

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

ЛР_№3 Таблицы HTML

Лабораторная работа №3.

Создание таблиц на web-странице

Цель работы: Научиться создавать таблицы различных форматов и размещать в них любую информацию.

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

Создание таблиц вручную – одна из наиболее сложных задач в HTML. Сначала формируете таблицу, затем первую строку, затем каждую ячейку с её содержанием. Каждый элемент требует открывающего и закрывающего тегов документа. Если вы забыли один – единственный текстовый маркер, то страницу никто не сможет прочитать. Некоторые Web-редакторы умеют создавать таблицу командами меню и способны изменить размер ячейки, её ширину, размер края и выравнивание содержимого с помощью диалоговой панели свойств.

Таблица данных

Это пример таблицы в самом основном понимании (именно на него изначально ориентировались создатели HTML) — как строк и столбцов с текстовыми данными.

Выравнивание текста

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

Шаблон страницы

Многие Web-дизайнеры используют большие таблицы в качестве контейнеров для задания структуры страницы. Одной из известных конфигураций является создание узких столбцов для пунктов навигации.

Контейнер для большого изображения

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

Базовая структура таблицы

В своей основе таблицы представляют собой ячейки, объединенные в строки и столбцы. Вы имеете возможность управлять характеристиками вывода на уровне всей таблицы, уровне строки и каждой отдельной ячейки. Минимальный набор тегов для описания таблицы включает <tab1e>, <tr> и <td>. Приводимый ниже код HTML демонстрирует базовую структуру таблицы с четырьмя ячейками:

<table> <tr>

<td>cell l</td><td>cell 2</td>

</tr> <tr>

<td>cell 3</td><td>cell 4</td>

</tr> </table>

Teг <table> определяет содержимое таблицы. Каждая строка задается тегом <tr> и состоит из множества ячеек данных (или заголовков). Количество столбцов определяется количеством ячеек в строке. Ячейки с данными обозначаются тегом <td>. Ячейка таблицы может содержать любые данные, пригодные для вывода HTML-документом (форматированный текст, изображения, мультимедийные элементы и даже другие таблицы).

Тег <table>

<table>.. ,</table>

Тег таблицы <table> определяет начало и конец таблицы. Закрывающий тег обязателен. Его отсутствие может привести к неверной обработке таблицы некоторыми браузерами.

Атрибуты:

align = left | right | center

Задает выравнивание таблицы в текстовом потоке (аналогично атрибуту выравнивания в теге изображения <img>). Значение по умолчанию left. Значение center поддерживается не всеми браузерами, поэтому более надежно для выравнивания по центру страницы использовать теги, находящиеся вне тега таблицы (например, <center> или <div>).

background = url

Определяет изображение, которое будет служить фоном для таблицы.

bgcolor = «#rrggbb» или название цвета

Задает цвет фона для всей таблицы.

border = число

Задает ширину (в пикселях) границы вокруг таблицы и ее ячеек. Задание border=0 полностью отменяет появление границы. Значение по умолчанию равно 1. Добавление атрибута border без значения приводит к появлению границы шириной один пиксель.

cellpadding = число

Задает размер интервала (в пикселах) между границей ячейки и ее содержимым. Значение по умолчанию равно 1.

cellspacing = число

Задает (в пикселах) размер интервала между ячейками таблицы. Значение по умолчанию равно 2.

Если значение атрибута границы (border) больше нуля, то по умолчанию frame использует это значение, пока не установлено другое.

height = число, проценты

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

hspace = число

Содержит размер интервала (в пикселях) слева и справа от выровненной таблицы. (Атрибут аналогичен hspace для тега <img>.)

vspace = число

Задает размер (в пикселях) свободного пространства над и под выровненной таблицей (аналогично vspace для тега <img>).

width = число, проценты

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

bordered or = “#rrggbb” или название цвета

Определяет цвет главной центральной части границы таблицы.

bordercolordark = «#rrggbb» или название цвета

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

Тег <caption> название таблицы </caption>. У тега <caption> есть всего один атрибут определяющий положение названия таблицы – align. Он может принимать два значения: top- над таблицей и bottom- под таблицей.

Тег <tr>

<tr>...</tr>

Тег <tr> задает в таблице строку ячеек. Строка таблицы, ограниченная тегами <tr>, не имеет никакого содержания, кроме совокупности ячеек таблицы (<td>). Завершающий тег не является обязательным.

Атрибуты:

align = left | center | right

Задает способ выравнивания текста (или других элементов) в ячейках текущей строки.

bgcolor = «#rrggbb» или название цвета.

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

valign = top | middle | bottom | baseline

Задает способ вертикального выравнивания текста (или других элементов) в ячейках текущей строки. Значение по умолчанию middle.

Тег <td>

<td>…</td>

Ter <td> определяет ячейку данных таблицы. Закрывающий тег не обязателен, но его наличие может предотвратить непредсказуемые сбои при выводе таблицы. В частности, они возможны, если содержимым ячейки является изображение. Атрибуты такие же как у тега <tr> плюс свои.

Атрибуты:

background = ur1

Определяет изображение, которое должно использоваться в качестве фона в ячейке.

colspan = число

Задает количество столбцов, которые будет объединять данная ячейка. Значение по умолчанию 1.

height = число, проценты

Задает высоту ячейки в пикселях или в процентах от высоты таблицы. Высота, заданная в первой ячейке, будет использована для остальных ячеек строки.

nowrap

Отменяет автоматическое обтекание текста для данной ячейки. Окончания строк должны быть дополнены тегами <р> или <br>.

rowspan = число

Задает количество строк, объединяемых данной ячейкой. .Значение по умолчанию равно 1.

width = число

Задает ширину ячейки в пикселях.

Тег <th>

<th> заголовок </th>

Атрибуты:

align = left | center | right

Задает способ выравнивания текста (или других элементов) в ячейках текущей строки.

valign = top | middle | bottom

Задает способ вертикального выравнивания текста (или других элементов) в ячейках текущей строки. Значение по умолчанию middle.

colspan = число

Задает количество столбцов, которые будет объединять данная ячейка. Значение по умолчанию 1.

rowspan = число

Задает количество строк, объединяемых данной ячейкой. Значение по умолчанию равно 1.

width = число

Задает ширину ячейки в пикселах.

bgcolor = «#rrggbb» или название цвета.

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

Простые таблицы – довольно большая редкость. Гораздо чаще встречаются сложные таблицы, в которых ячейки располагаются одновременно в нескольких соединениях столбцах или строках. Ниже приведём пример (см. пример 9), который демонстрирует таблицу 3х3 с заголовками, различными видами разбиения таблицы на ячейки и заданной рамкой. Для объединения ячеек используются атрибуты colspan и rowspan. Атрибут colspan сообщает программе просмотра, что нужно раздвинуть клетку таблицы на несколько столбцов. Например, в нашем примере 9 ячейку А нужно растянуть на ячейку одного столбца и на две строки, для этого задаём colspan=1, а rowspan=2, а ячейку F нужно растянуть на ячейки трёх столбцов и на одну строку, следовательно, colspan=3, а rowspan=1. В данном примере используется атрибут border =8. Он устанавливает ширину рамки таблицы и может принимать любое значение от 0 до 10. Если данный атрибут не указать или задать равным нулю, то у таблицы будет отсутствовать рамка, такая таблица приведена ниже на рисунке 6.

Пример 9:

<html> <head>

<title>Таблица</title>

</head> <body>

<h3 align = center> Обычная таблица 3х3 с заголовками

и различными видами разбиения ячеек и рамкой шириной равной 8</h3>

<table border=8>

<tr>

<th>Заголовок 1</th> <th>Заголовок 2</th>

<th>Заголовок 3</th></tr>

<tr>

<td align=center rowspan=2

colspan=1>ячейка таблицы A</td>

<td>ячейка таблицы B</td>

<td>ячейка таблицы C</td>

</tr><tr><td>ячейка таблицы D</td>

<td>ячейка таблицы E</td>

<tr><td align=center rowspan=1

colspan=3>ячейка таблицы F</td>

</tr> </title> </body> </html>

Результат:

Рис. 5 Пример таблицы 3х3

Рис.6 Пример таблицы без рамки

Cellpadding и Cellspacing

У тега table есть атрибуты, которые используются в паре: Cellspacing и Cellpadding. Для того чтобы избавиться от пространства между ячейками таблицы используется атрибут cellspacing, в html файле это запишется следующим образом <table cellspacing=0>. Можно увеличить пространство между ячейками, тогда, например cellspacing=10 (см. рисунок 7).

Рис.7 Пример использования Cellspacing

Атрибут cellpadding добавляет свободное пространство между содержимым ячейки и ее границами (см. рисунок 8).

Рис.8 Пример использования Cellpadding

Рис.9 Пример использования Cellpadding и Cellspacing

Многие Web-дизайнеры используют большие таблицы в качестве контейнеров для задания структуры страницы. Одной из известных конфигураций является создание узких столбцов для пунктов навигации.

Атрибут WIDTH

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

Пример 10:

<HTML> <HEAD>

<TITLE>Таблица</TITLE>

</HEAD>

<BODY>

<h3 ALIGN = Center> Таблица</h3>

<TABLE BORDER WIDTH=”50%”>

<TR><TD WIDTH=80%>Таблица в 50% ширины от экрана. Столбец в 80% ширины таблицы</TD><TD>ячейка 2</TD>

</TR>

<TR><TD>ячейка 3</TD><TD>ячейка 4</TD>

</TR>

</TABLE> </BODY> </HTML>

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

Результат:

Рис.10 Пример использования атрибута Width

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

Пример 11:

<HTML> <HEAD>

<TITLE>Программа по обучению детей работе с Интернетом</TITLE>

</HEAD>

<BODY bgcolor=”#FFFFFF” link= #ff0000

vlink= #ff0000>

<center><table noborder cellpadding=”20”

cellspacing=”20” width=80%><tr>

<td align=left>

<center><img src=”!/russia.gif”>

</center> <hr> <P>Текст программы обучения детей работе с Интернетом……. .</P>

</tr></td> </TABLE> </BODY> </HTML>

Результат:

Рис.11 Пример использования таблицы для форматирования текста

Контейнер для большого изображения

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

Практические задания.

* Текст для выполнения практических заданий необходимо брать из файла «текст для лабораторных работ.doc».

  1. Создайте HTML документ, <head>, задайте название документа с помощью тега <title> и включите дополнительные сведения о документе используя тег <meta>.

  2. Задайте фоновый цвет документа, используя необходимый атрибут тега <body>.

  3. Создайте таблицу следующего формата: 4 столбца и 5 строк; ширина рамки таблицы =7; объедините несколько ячеек по строкам и несколько по столбцам. Добавьте в таблицу текст с различным выравниванием: в право, в лево, по центру и форматированием.

  4. Создайте 3 таблицы следующего формата: 2 столбца и 2 строки; ширина рамки таблицы =4; в первой таблице увеличите пространство между ячейками, во второй таблице уменьшите пространство между ячейками, в третей таблице установите ширину таблицы и ширину первого столбца в %. Добавьте в таблицу текст с различным выравниванием: в право, в лево, по центру и форматированием.

  5. Создайте таблицу с невидимыми границами и используйте ее для разметки текста.

Теоретические вопросы:

  1. Для каких целей используются таблицы на веб-странице?

  2. Базовая структура таблицы.

HTML-таблиц, туториал на примере

HTML-таблицы, туториал на примере

Расширения тега

, поддерживается Netscape, включая BORDER, CELLPADDING, CELLSPACING и WIDTH. Вы можете присвоить номер BORDER, чтобы указать ширина в пикселях внешней границы таблицы. Вы также можете присвоить номер CELLPADDING определение пространства (в пикселях) между содержимое ячейки и границы ячейки, в то время как CELLSPACING определяет пространство между ячейки (ширина границ).

Наконец, атрибут WIDTH устанавливает ширину весь стол. Это может быть выражено как абсолютное число (в пикселях) или в процентах ширина всего экрана.

Эта страница начинается (раздел A) с серией таблиц, демонстрирующих доступные варианты. Затем (раздел B) каждая таблица показана вместе с исходным кодом HTML, который его создает.

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


Пример 1: обычная (без границ) 9002 7
Деталь A1 Деталь A2 Деталь A3
Деталь B1 Деталь B2 (это B3)
Деталь C1 -C2- *C3*
Артикул D1 Артикул D2 Артикул D3

Пример 2: с рамкой
Деталь A1 Деталь A2 Деталь A3
Деталь B1 Деталь B2 (это B3)
Деталь C1 -C2- 9002 2 *C3*
Артикул D1 Артикул D2 Пункт D3

Пример 3: с заполнением ячеек

Деталь A1 Деталь A2 Деталь A3
Деталь B1 Деталь B2 (это B3)
Деталь C1 -C2- *C3*
Номер позиции D1 Деталь D2 90 022 Деталь D3

Пример 4: с бордюром и клеточным вкладышем

Деталь A1 Деталь A2 Деталь A3
Деталь B1 Деталь B2 (это B3) 9002 2
Деталь C1 -C2- *C3*
Артикул D1 Артикул D2 Артикул D3

Пример 5: с «ячейками заголовка»

Деталь A1 Деталь A2 Деталь A3
Деталь B1 Деталь B2 (это B3) 9002 2
Деталь C1 -C2- *C3*
Артикул D1 Деталь D2 Деталь D3

Пример 6. Переопределение стилей ячеек по умолчанию

Деталь A1 Артикул A2 Пункт А3
Деталь B1 Деталь B2 (это B3)
Пункт С1 -С2- *С3*
Артикул номер D1 Пункт D2 Деталь D3

Пример 7: пустые ячейки

Деталь А2 Пункт А3
Деталь B1 Деталь B2
Пункт С1 -С2-
Артикул номер D1  

Пример 8: колспаны

Элементы A1, A2 Пункт А3
Деталь B1 Деталь B2 (это B3)
Пункт С1 Предметы С2 и С3
Элементы с маркировкой D1, D2 и D3

Пример 9: диапазон строк

Пункт А1 Деталь А2 Предметы А3,
В3,
С3
Деталь B1 Деталь B2
Элементы C1 и D1 -С2-
Деталь D2 Пункт D3

Пример 10: colspan и rowspan

Детали A1,
B1
Предметы А2, А3
Элементы B2, B3
Пункт С1 С2, Д2 *С3*
Артикул D1 Пункт D3

Пример 11: таблицы внутри таблицы

А1а1 А1а2
А1b1 A1b2
А2 А3
В1 В2 В3
С1
А1а1 А1а2
А1b1 A1b2
С3

Пример 12:

предварительное форматирование

 10,98$ 305,20$ 29,9$5 $ 3,16
   11,05 291,80 39,95 0,87
   12,77 290,10 19,95 0,23
   23,51 301,40 9,95 0,79
    7,39 306,90 99,95 1,50
   20,16 295,30 79,95 0,90
 

Пример 13: атрибут WIDTH

ширина=50% ширина=35% ХХХ
А Б С
Д Е Ф

Пример 1: обычная (без границ)
Деталь A1 Деталь А2 Пункт А3
Деталь B1 Деталь B2 (это B3)
Пункт С1 -С2- *С3*
Артикул D1 Пункт D2 Пункт D3

.

Каждая строка ячеек (перечисленных в слева направо)
окружен тегами

и .

Вся таблица , состоящий из одной или нескольких строк,
окружен тегами

Содержимое каждой ячейки окруженный
парой тегов <тд> и
и .

|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
  <таблица> 
   
Пункт A1 Пункт A2 Пункт A3
Элемент B1 Элемент B2 (это B3)
Элемент C1 -C2- *C3*
Номер позиции D1 Элемент D2 Элемент D3

Пример 2: с рамкой
Деталь A1 Деталь А2 Пункт А3
Пункт В1 Деталь B2 (это B3)
Пункт С1 -С2- *С3*
Артикул D1 Пункт D2 Пункт D3
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<таблица  граница=3  >
   
Элемент A1 Элемент A2 Элемент A3
Элемент B1 Элемент B2 (это B3)
Элемент C1 -C2- *C3*
Номер позиции D1 Элемент D2 Элемент D3

Пример 3: с заполнением ячеек
Деталь A1 Деталь А2 Пункт А3
Деталь B1 Деталь B2 (это B3)
Пункт С1 -С2- *С3*
Артикул D1 Пункт D2 Пункт D3
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<таблица  cellpadding=5  >
   
Элемент A1 Элемент A2 Элемент A3
Элемент B1 Элемент B2 (это B3)
Элемент C1 -C2- *C3*
Номер позиции D1 Элемент D2 Элемент D3

Пример 4: с бордюром и клеточным вкладышем
Деталь A1 Деталь А2 Пункт А3
Деталь B1 Деталь B2 (это B3)
Пункт С1 -С2- *С3*
Артикул D1 Пункт D2 Пункт D3
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<таблица  border=3 cellpadding=5  >
   
Элемент A1 Элемент A2 Элемент A3
Элемент B1 Элемент B2 (это B3)
Элемент C1 -C2- *C3*
Номер позиции D1 Элемент D2 Элемент D3

< th >Элемент A1< /th > < th >Элемент A2< /th > < th >Элемент A3< /th >
Пример 5: с «ячейками заголовка»
Деталь A1 Пункт А2 Деталь A3
Деталь B1 Деталь B2 (это B3)
Пункт С1 -С2- *С3*
Артикул D1 Пункт D2 Пункт D3
есть (на
по умолчанию) в виде простого текста и выравнивание по левому краю;

текст в

(по умолчанию
) в жирным шрифтом , и сосредоточенный

текст в«ячейках данных»«ячейках заголовка»
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<граница таблицы=3cellpadding=5>
   
Элемент B1 Элемент B2 (это B3)
Элемент C1 -C2- *C3*
Номер позиции D1 Элемент D2 Элемент D3

Пример 6: Переопределение значений по умолчанию
для
и <й>
Деталь A1 Артикул A2 Пункт А3
Деталь B1 Деталь B2 (это B3)
Пункт С1 -С2- *С3*
Артикул номер D1 Пункт D2 Элемент D3
Значения по умолчанию стиля ячейки могут быть переопределены
с опцией ALIGN= в
и
<й> теги и с помощью обычного
жирного шрифта и курсив теги.
(Обратите внимание, что в этом примере border=7!)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<граница таблицы=7cellpadding=5>
   
align=right >Элемент A1 Товар A2 Элемент A3
Элемент B1 Элемент B2 (это B3)
выравнивание=центр >Элемент C1 -C2- *C3*
Элемент номер D1 Элемент D2 align=right >Элемент D3

<тд> <тд> <тд> <тд>
Пример 7: пустые ячейки
Деталь А2 Пункт А3
Деталь B1 Деталь B2
Пункт С1 -С2-
Артикул D1  
Пустые ячейки даже не получают границы
, если только вы не используете специальный символ
  ( n на b рекинг sp туз)
в качестве заполнителя в ячейке.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<граница таблицы=3cellpadding=5>
   
Элемент A2 Элемент A3
Элемент B1 Элемент B2
Элемент C1 -C2-
Номер элемента D1  

colspan=2 >Элементы C2 и C3
Пример 8: колспаны
Элементы A1, A2 Пункт А3
Деталь B1 Деталь B2 (это B3)
Пункт С1 Предметы С2 и С3
Элементы с маркировкой D1, D2 и D3
Используя параметр colspan=2
внутри
или Тег
делает ячейку шириной 2
«нормальных» ячеек. Значение
столбец может быть любым числом
до полного числа
столбца в таблице.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<граница таблицы=3cellpadding=5>
   
colspan=2 >Элементы A1, A2 Элемент A3
Элемент B1 Элемент B2 (это B3)
Элемент C1
colspan=3 >Помеченные элементы D1, D2 и D3

Пример 9: диапазон строк
Деталь A1 Деталь А2 Предметы А3,
В3,
С3
Деталь B1 Деталь B2
Элементы C1 и D1 -С2-
Деталь D2 Пункт D3
Используя опцию rowspan=2
внутри
или Тег
увеличивает размер ячейки до 2
«нормальных» ячеек. Значение
ряды может быть любым числом от
до полного числа
строк в таблице.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<граница таблицы=3cellpadding=5>
   
Элемент A1 Элемент A2 rowspan=3 >Элементы A3,
B3,
C3
Элемент B1 Элемент B2
rowspan=2 >Элементы C1 и D1 -C2-
Элемент D2 Элемент D3

<тд rowspan=2 >Элементы A1,
B1
Пример 10: colspan и rowspan
Элементы A1,
B1
Предметы А2, А3
Элементы B2, B3
Пункт С1 С2, Д2 *С3*
Артикул D1 Пункт D3
Вы можете смешивать colspan и рядов
в той же таблице, но будьте осторожны, чтобы
удалил «лишние» ячейки.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<граница таблицы=3cellpadding=5>
   
colspan=2 >Элементы A2, A3
colspan=2 >Элементы B2, B3
Элемент C1 rowspan=2 > C2,D2 *C3*
Номер позиции D1 Элемент D3

Пример 11: таблицы внутри таблицы
А1а1 А1а2
А1b1 A1b2
А2 А3
В1 В2 В3
С1
А1а1 А1а2
А1b1 A1b2
С3

Содержимое ячейки
может быть другой таблицей.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<граница таблицы=3cellpadding=5>
   
<граница таблицы>
A1a1 A1a2
A1b1 A1b2
А2 A3
B1 B2 B3
C1 <таблица cellpadding=4>
A1a1 A1a2
A1b1 A1b2
C3

Пример 12:
предварительное форматирование
 10,98$ 305,20$ 29,95$ 3,16$
   11,05 291,80 39,95 0,87
   12,77 290,10 19,95 0,23
   23,51 301,40 9,95 0,79
    7,39 306,90 99,95 1,50
   20,16 295,30 79,95 0,90
 
Конечно, не нужно использовать <таблица> тег
вообще, если обычный текст уже правильно выровнен
с использованием шрифта фиксированной ширины;
заключить предварительно отформатированный текст в
   и 
теги.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
  <пред> 
 10,98$ 305,20$ 29,95$ 3,16$
   11,05 291,80 39,95 0,87
   12,77 290,10 190,95 0,23
   23,51 301,40 9,95 0,79
    7,39 306,90 99,95 1,50
   20,16 295,30 79,95 0,90
   
 

Пример 13: атрибут WIDTH
50% 35% ХХХ
А Б С
Д Е Ф

указывает таблицу 75% полная ширина окна Netscape.

<тд>С <тд>Д
(или TD) указывает, что ячейка должна составлять 50% от полной ширины таблицы.

|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<таблица  ширина=75% 
  граница=3
  отступ=2>
ШИРИНА=50% > 50% ШИРИНА=35% > 35% ХХХ
А Б
Е Ф

подготовлено Bruce.
[email protected]

Элементы/таблица — HTML Wiki

  • Список элементов
    • Столы
      • стол
      • подпись
      • колгруппа
      • цв.
      • корпус
      • ад
      • тфут
      • т.р.
      • тд

Содержание

  • 1 <таблица>
    • 1.1 Точка
    • 1.2 Атрибуты HTML
    • 1.3 Примеры
      • 1.3.1 Пример А
      • 1.3.2 Пример В
    • 1.4 Справочник по HTML

Элемент

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

Точка

  • Таблицы не должны использоваться в качестве вспомогательных средств. Существует множество альтернатив использованию HTML-таблиц для макета, в основном с использованием CSS-позиционирования и модели таблиц CSS.
  • Пользователи могут испытывать трудности с пониманием содержания, авторы должны включать пояснительную информацию, вводящую таблицу. Эта информация полезна для всех пользователей, но особенно полезна для пользователей, которые не могут видеть таблицу, т.е. пользователи программ чтения с экрана. [Пример B]
  • Таблицы имеют строки и столбцы, заданные их потомками. В таблице не должно быть пустой строки или столбца.

Атрибуты HTML

  • сводка = пояснительная информация, вводящая в таблицу

См. также глобальные атрибуты.

Примеры

Пример A

[попробуйте]:

<таблица>
  

Пример B

Следующий пример включает пояснительную информацию, вводящую таблицу рядом с таблицей на том же рисунке [попробуйте]:

 <рисунок>
Характеристики с положительными и отрицательными сторонами

Характеристики приведены во втором столбце с отрицательная сторона в левом столбце и положительная сторона в правом столбце.

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

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

Характеристики с положительными и отрицательными сторонами
Характеристика Исключение Положительно
Настроение Грустно Счастливый
Оценка Ошибка Прохождение