< к оглавлению
Конспект простейшей таблицы
<table border=1>
<tr> <tr>
|
<td> ... </td> |
<td> ... </td> |
<td> ... </td> |
<td> ... </td> |
<td> ... </td> |
<td> ... </td> |
|
</tr> </tr>
|
</table>
Конспект немного более сложной таблицы
<table border=1>
<caption>
Здесь можно ввести заголовок
<caption>
<tr> <tr> <tr>
|
<th> ... </th> |
<th> ... </th> |
<th> ... </th> |
<td> ... </td> |
<td> ... </td> |
<td> ... </td> |
<td> ... </td> |
<td> ... </td> |
<td> ... </td> |
|
</tr> </tr> <tr>
|
</table>
Расшифровка тэгов:
table - англ. таблица
caption - англ. заголовок
tr - table row - англ. табличный ряд
th - table header cell - англ. ячейка заголовка
td - table data cell - англ. информационная ячейка
Описание атрибутов, видоизменяющих внешний вид таблицы
1. border="цифра"
Данный атрибут определяет ширину рамки таблицы. По умолчанию он равен 0, т.е. рамка таблицы вообще не отображается. Такой приём позволяет формировать текстовый блоки без явного, видимого зрителю, обозначения их границ. Если дескриптор имеет вид <table border=1> , то таблица принимает следующий вид (при рассмотрении дальнейших примеров данное изображение можно использовать в качестве эталонного).
НЕКОТОРЫЙ ТЕКСТ |
НЕКОТОРЫЙ ТЕКСТ |
НЕКОТОРЫЙ ТЕКСТ |
НЕКОТОРЫЙ ТЕКСТ |
Если <table border=20> , то
НЕКОТОРЫЙ ТЕКСТ |
НЕКОТОРЫЙ ТЕКСТ |
НЕКОТОРЫЙ ТЕКСТ |
НЕКОТОРЫЙ ТЕКСТ |
2. bordercolor="значение"
Цвет границы. В зависимости от расположения атрибут определяет цвет линии, ограничивающей таблицу и/или ячейку. Пример:
НЕКОТОРЫЙ ТЕКСТ |
НЕКОТОРЫЙ ТЕКСТ |
НЕКОТОРЫЙ ТЕКСТ |
НЕКОТОРЫЙ ТЕКСТ |
3. bgcolor="значение"
(bgcolor - background color - англ. цвет заднего фона) С помощью данного атрибута можно изменить фоновый цвет всей таблицы, строки или отдельной ячейки - в зависимости от того, в какой именно дескриптор его вставить. Пример:
НЕКОТОРЫЙ ТЕКСТ |
НЕКОТОРЫЙ ТЕКСТ |
НЕКОТОРЫЙ ТЕКСТ |
НЕКОТОРЫЙ ТЕКСТ |
4. cellpadding="цифра"
(cell - англ. клетка, ячейка; padding - англ. набивка, набивочный материал)
Данный атрибут определяет минимально возможный отступ между внутренней границей ячейки и введённым текстом. По умолчанию данное значение = 1. Если же, к примеру, если <table border=1 cellpading=20> , то таблица изменится следующим образом
НЕКОТОРЫЙ ТЕКСТ |
НЕКОТОРЫЙ ТЕКСТ |
НЕКОТОРЫЙ ТЕКСТ |
НЕКОТОРЫЙ ТЕКСТ |
5. cellspacing="цифра"
(cell - англ. клетка, ячейка; spacing - англ. промежуток, интервал)
Атрибут определяет промежуток между границами ячеек, а также между границами ячеек и границей таблицы. По умолчанию значение =1. Назначение атрибута проще понять, взглянув на пример, в нём <table border=1 cellspacing=20>
НЕКОТОРЫЙ ТЕКСТ |
НЕКОТОРЫЙ ТЕКСТ |
НЕКОТОРЫЙ ТЕКСТ |
НЕКОТОРЫЙ ТЕКСТ |
6. align="значение"
(align - англ. выравнивать) Задаёт выравнивание текста по горизонтали в таблице или её отдельных ячейках. Возможные значения: left/center/right.
7. valign="значение"
(valign - vertical align - англ. выровнять по вертикали) Задаёт выравнивание текста в таблице по вертикали. Возможные значения: baseline/bottom/middle.
8. background="адрес_рисунка"
(background - англ. задний план, фон) Позволяет в качестве фона использовать какой-либо рисунок. Если изображение небольшое, происходит создание мозайки. Пример:
НЕКОТОРЫЙ ТЕКСТ |
НЕКОТОРЫЙ ТЕКСТ |
НЕКОТОРЫЙ ТЕКСТ |
НЕКОТОРЫЙ ТЕКСТ |
9. colspan="цифра"
(colspan - column span - англ. перекрывать стоблцы) Атрибут позволяет как бы объединить несколько ячеек по горизонтали. Другими словами, там, где следовало размещаться нескольким ячейкам, находится одна. Простейший пример:
НЕКОТОРЫЙ ТЕКСТ |
НЕКОТОРЫЙ ТЕКСТ |
НЕКОТОРЫЙ ТЕКСТ |
10. rowspan="цифра"
(rowspan - row span - англ. перекрывать ряды) Благодаря данному атрибуту нескольких расположенных друг под другом ячеек можно заменить одной большой. Простейший пример:
НЕКОТОРЫЙ ТЕКСТ |
НЕКОТОРЫЙ ТЕКСТ |
НЕКОТОРЫЙ ТЕКСТ |
11. <caption> ... </caption>
(caption - англ. заголовок) Правильнее сказать, это не атрибут, а дополнительный дескриптор, вставляемый между тэгами <table> ... </table>. Он определяет текст заголовка данной таблицы. Внутрь дескриптора <caption> также может быть помещён атрибут align="значение", благодаря чему можно регулировать местоположение заголовка. Возможные значения:
а) align=top
<table border=1>
<caption align=top>
Мой_заголовок
</caption>
<tr>
<td>НЕКОТОРЫЙ ТЕКСТ</td>
<td>НЕКОТОРЫЙ ТЕКСТ</td>
</tr>
<tr>
<td>НЕКОТОРЫЙ ТЕКСТ</td>
<td>НЕКОТОРЫЙ ТЕКСТ</td>
</tr>
</table>
Мой_заголовок
НЕКОТОРЫЙ ТЕКСТ |
НЕКОТОРЫЙ ТЕКСТ |
НЕКОТОРЫЙ ТЕКСТ |
НЕКОТОРЫЙ ТЕКСТ |
(top - значение по умолчанию, т.е. такой же результат мы получим, если вообще не будем в дескрипторе <caption> использовать атрибут align)
б) align=bottom
Мой_заголовок
НЕКОТОРЫЙ ТЕКСТ |
НЕКОТОРЫЙ ТЕКСТ |
НЕКОТОРЫЙ ТЕКСТ |
НЕКОТОРЫЙ ТЕКСТ |
в) align=left
Мой_заголовок
НЕКОТОРЫЙ ТЕКСТ |
НЕКОТОРЫЙ ТЕКСТ |
НЕКОТОРЫЙ ТЕКСТ |
НЕКОТОРЫЙ ТЕКСТ |
г) align=right
Мой_заголовок
НЕКОТОРЫЙ ТЕКСТ |
НЕКОТОРЫЙ ТЕКСТ |
НЕКОТОРЫЙ ТЕКСТ |
НЕКОТОРЫЙ ТЕКСТ |
< к оглавлению