frame= | Void Above Below Lhs Rhs Hsides Vsides Box |
Задание типа рамки таблицы |
frame=hsides |
valign= | Top Bottom | Выравнивание по высоте | valign=top |
width= | n n% | Минимальная ширина таблицы, можно задавать в пикселах или процентах |
width=90% |
height | n n% | Минимальная высота таблицы, можно задавать в пикселах или процентах |
height=18 |
Примечание
- Таблица, если не указано особо, всегда выравнивается по левому краю;
- Параметр background, отвечающий за рисунок фона, своеобразно понимается в разных браузерах. IE вставляет картинку во всю таблицу, если таблица по размеру больше фонового рисунка, он повторяется по горизонтали или вертикали. Netscape добавляет фоновое изображение в каждую ячейку таблицы;
- По умолчанию, таблица выводится без рамки. Однако Netscape добавляет тонкую линию между ячеек. Чтобы ее не было, всегда указывайте параметр border=0;
- Если ширина таблицы не указана, она подгоняется под содержание ячеек.
Пример 1:Создание таблицы
ТАБЛИЦА</ТIТLE></span></p><p class="c5 c1"><span class="c2"></HEAD></span></p><p class="c0 c1"><span class="c2"><BODY></span></p><p class="c0 c1"><span class="c2"><TABLE border="2" align=center> </span></p><p class="c0 c1"><span class="c2"><TR></span></p><p class="c0 c1"><span class="c2"><TD colspan=2 align=center> </span></p><p class="c0 c1"><span class="c2"><B>Заголовок Таблицы.</В></span></p><p class="c0 c1"><span class="c2"></TD></span></p><p class="c0 c1"><span class="c2"></TR> </span></p><p class="c0 c1"><span class="c2"><TR></span></p><p class="c0 c1"><span class="c2"><TD align="center"></span></p><p class="c0 c1"><span class="c2">Первая ячейка первой строки</span></p><p class="c0 c1"><span class="c2"></TD></span></p><p class="c0 c1"><span class="c2"><TD align="center"></span></p><p class="c0 c1"><span class="c2">Вторая ячейка первой строки</span></p><p class="c0 c1"><span class="c2"></TD> </span></p><p class="c0 c1"><span class="c2"></TR> </span></p><p class="c0 c1"><span class="c2"><TR></span></p><p class="c1 c33"><span class="c2"><TD align="center"></span></p><p class="c0 c1"><span class="c2">Первая ячейка второй строки</span></p><p class="c0 c1"><span class="c2"></TD></span></p><p class="c0 c1"><span class="c2"><TD align="center"> </span></p><p class="c0 c1"><span class="c2">Вторая ячейка второй</span></p><p class="c1 c16"><span class="c2"></TD> </span></p><p class="c16 c1"><span class="c2"></TR> </span></p><p class="c16 c1"><span class="c2"></TABLE> </span></p><p class="c16 c1"><span class="c2"></BODY> </span></p><p class="c16 c1"><span class="c2"></HTML></span></p><p class="c1 c50"><span class="c2">Тег </span><span class="c3"><TABLE> </span><span class="c2">задает таблицу</span></p><p class="c5 c1"><span class="c2">1. Атрибуты </span><span class="c3">border="2" </span><span class="c2">и </span><span class="c3">align=center </span><span class="c2">задают, соответственно, размер границ таблицы и выравнивание ее по центру страницы Тег </span><span class="c3"><TR> </span><span class="c2">задает строку таблицы Тег </span><span class="c3"><TD> </span><span class="c2">задает ячейку таблицы</span></p><p class="c5 c1"><span class="c2">2. Атрибут </span><span class="c3">colspan=n </span><span class="c2">объединяет n ячеек по горизонтали (по столбцам) В результате получится следующая таблица, состоящая из двух столбцов и двух строк:</span></p><a id="t.c38e94c84447295a6715e309775c700fa50baf72"></a><a id="t.1"></a><table class="c51"><tr class="c17"><td class="c53" colspan="2" rowspan="1"><p class="c13 c42"><span class="c52">Заголовок Таблицы. </span></p></td></tr><tr class="c17"><td class="c8" colspan="1" rowspan="1"><p class="c13"><span class="c11">Первая ячейка первой строки </span></p></td><td class="c12" colspan="1" rowspan="1"><p class="c13"><span class="c11">Вторая ячейка первой строки </span></p></td></tr><tr class="c17"><td class="c8" colspan="1" rowspan="1"><p class="c13"><span class="c11">Первая ячейка второй строки </span></p></td><td class="c12" colspan="1" rowspan="1"><p class="c13"><span class="c11">Вторая ячейка второй </span></p></td></tr></table><p class="c0 c22 c1"><span class="c3"></span></p><p class="c0 c1"><span class="c3">Пример 2. Сложная таблица</span></p><p class="c0 c1"><span class="c2"><HTML> </span></p><p class="c0 c1"><span class="c2"><HEAD></span></p><p class="c0 c1"><span class="c2"><TITLE>СЛОЖНАЯ ТАБЛИЦА
Две ячейки, объединенные по горизонтали
|
Две ячейки, объединенные по вертикали
|
по левому краю
|
по правому краю
|
Атрибут colspan=n объединяет n ячеек по горизонтали (по столбцам)
Атрибут rowspan=n объединяет n ячеек по вертикали (по строкам)
Атрибут valign="middle" выравнивает текст в ячейке по центру ячейки по вертикали
В результате получается следующая таблица:
Две ячейки, объединенные по горизонтали |
Две ячейки, объединенные по вертикали | по левому краю |
по правому краю |
Пример 3: Более сложная таблица
УЧЕБНАЯ ТАБЛИЦА
УЧЕБНАЯ ТАБЛИЦА |
|---|
Это первая ячейка |
Это вторая ячейка
| А это три ячейки третьего столбца объединились в одну большую |
Это единственная ячейка второй строки, объединяющая оба столбца |
Это первая ячейка третьей строки |
А это вторая ячейка третьей строки</TD >
|
конец |
Атрибут CELLSPACING="6" задает свободное пространство между ячейками таблицы
Атрибут CELLPADDING="20" задает свободное пространство между данными в ячейке и ее границами
Атрибут BORDERCOLORLIGHT="Lime" задает цвет левого и верхнего углов таблицы
Атрибут BORDERCOLORDARK="Green" задает цвет правого и нижнего углов таблицы
Атрибут BGCOLOR="#DFFFDF" задает цвет фона таблицы
В результате получается следующая таблица:
![]()
Задание:
Создать турнирную таблицу, представленную ниже на рисунке.
Для задания кавычек используйте специальные символы « ("«") и » ("»"), для создания длинного тире используйте специальный символ — ("—").
![]()
Рисунок 5.1 -Пример таблицы
Контрольные вопросы:
- Для чего необходима таблица в веб-документе?
- Элементы таблицы?
- Параметры таблицы?
- Простые и сложные таблицы.
- Параметры тега TABLE?
