Приклад простої таблиці

 

Для більшої наочності розглянемо властивості таблиць детальніше. Тег <table> задає початок і кінець таблиці, будь-яка таблиця, як відомо, складається з рядків і стовпців, для цього є ще два теги: <tr> - рядок таблиці <td> - стовпчик таблиці. Приклад простої таблиці з трьома стрічками та стовпчиками:

 

 

<html>

<head>

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

</head>

<body>

<table border="1">

<tr>

<td>стрічка1 комірка1</td>

<td> стрічка1 комірка2</td>

<td> стрічка1 комірка3</td>

</tr>

<tr>

<td> стрічка2 комірка1</td>

<td> стрічка2 комірка2</td>

<td> стрічка2 комірка3</td>

</tr>

<tr>

<td> стрічка3 комірка1</td>

<td> стрічка3 комірка2</td>

<td> стрічка3 комірка3</td>

</tr>

</table>

</body>

</html>

 

Обрамлення таблиці за допомогою параметра BORDER не завжди однаково працює в різних браузерах. В цьому випадку можна використовувати вкладені таблиці. В першій таблиці потрібно задати ширину за допомогою параметра WIDTH тегу TABLE. Ця таблиця повинна складатися з одного ряду, в якому одна клітинка. У цю комірку потрібно вставити ще одну таблицю, задавши значення параметра WIDTH цієї таблиці рівним 100%. У результаті ширина внутрішньої таблиці буде прагнути до ширини комірки першої таблиці, в якій вона знаходиться. Далі потрібно задати параметр CELLPADDING першої таблиці рівним ширині бордюру в пікселах, який ви хочете побачити навколо вашої уявної таблиці. У нашому прикладі CELLPADDING = 1 для першої таблиці. Залишається задати параметр BGCOLOR для першої таблиці (це буде колір бордюру) і BGCOLOR для другої таблиці (це буде колір фону нашої уявної таблиці). Параметр BORDER обох таблиць повинен бути рівним 0, щоб уникнути відображення справжніх бордюрів таблиць.

Далі наводиться HTML код прикладу:

<TABLE BGCOLOR=black BORDER=0 CELLSPACING=0 CELLPADDING=1 WIDTH=50% ALIGN=center>

<TR>

<TD>

<TABLE BORDER=0 CELLSPACING=0 BGCOLOR=yellow WIDTH=100%>

<TR>

<TD ALIGN=center>Таблица</TD>

</TR>

</TABLE>

</TD>

</TR>

</TABLE>

 








Дата добавления: 2015-05-08; просмотров: 842;


Поиск по сайту:

При помощи поиска вы сможете найти нужную вам информацию.

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

Если вам перенёс пользу информационный материал, или помог в учебе – поделитесь этим сайтом с друзьями и знакомыми.
helpiks.org - Хелпикс.Орг - 2014-2024 год. Материал сайта представляется для ознакомительного и учебного использования. | Поддержка
Генерация страницы за: 0.003 сек.