Студопедия Главная Случайная страница Обратная связь

Разделы: Автомобили Астрономия Биология География Дом и сад Другие языки Другое Информатика История Культура Литература Логика Математика Медицина Металлургия Механика Образование Охрана труда Педагогика Политика Право Психология Религия Риторика Социология Спорт Строительство Технология Туризм Физика Философия Финансы Химия Черчение Экология Экономика Электроника

Таблицы. Таблицы являются основным элементом разметки html страниц




 

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

Таблица задается тэгом:

<table> (</table>)

 

Таблица состоит из строк и столбцов (ячеек), поэтому их надо указать:

<tr></tr> - строка таблицы;

<td></td> - столбец (ячейка) таблицы.

 

Сначала следует задавать строки (пусть их будет две):

<table>

<tr></tr>

<tr></tr>

</table>

 

Затем в каждой строке задаются столбцы (ячейки):

<table>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

</table>

 

Теперь надо заполнить получившийся каркас:

<table>

<tr>

<td>1x1</td>

<td>1x2</td>

<td>1x3</td>

</tr>

<tr>

<td>2x1</td>

<td>2x2</td>

<td>2x3</td>

</tr>

</table>

 

Первая цифра в этих записях - это номер ряда, а вторая - номер столбца (1х2 - первый ряд, второй столбец и т.д.).

Если посмотреть, что уже получилось, то это будет выглядеть так:

 

1x1 1x2 1x3
2x1 2x2 2x3

Фон таблицы задается параметром bgcolor="цвет фона". Фон можно задать для таблицы в целом, для ряда, для столбца (в пределе одного ряда). В следующем примере зададим фон для каждого столбца.

<table>
<tr>
<td bgcolor="FFCC33">1x1</td>
<td bgcolor="336699">1x2</td>
<td bgcolor="FFCC33">1x3</td>
</tr>
<tr>
<td bgcolor="336699">2x1</td>
<td bgcolor="FFCC33">2x2</td>
<td bgcolor="336699">2x3</td>
</tr>
</table>

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

<table>
<tr>
<td height="35" width="50" bgcolor="FFCC33"> 1x1 </td>
<td width="50" bgcolor="336699"> 1x2 </td>
<td width="50" bgcolor="FFCC33"> 1x3 </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="336699"> 2x1 </td>
<td width="50" bgcolor="FFCC33"> 2x2 </td>
<td width="50" bgcolor="336699"> 2x3 </td>
</tr>
</table>

 

Если в ряду задается для какого-либо столбца (ячейки) высота большая, чем для других, то все ячейки (столбцы) ряда станут по высоте равными наибольшей. То же самое с рядами: если задать для какого-то ряда наибольшую длину, то все остальные ряды выровняются по наибольшему ряду.

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

Теперь осталось лишь выровнять содержимое внутри таблицы:

 

<table>

<tr>

<td height="35" width="50" bgcolor="FFCC33"> <center> 1x1 </center> </td>

<td width="50" bgcolor="336699"> <center> 1x2 </center> </td>

<td width="50" bgcolor="FFCC33"> <center>1x3 </center> </td>

</tr>

<tr>

<td height="35" width="50" bgcolor="336699"> <center> 2x1 </center> </td>

<td width="50" bgcolor="FFCC33"> <center> 2x2 </center> </td>

<td width="50" bgcolor="336699"> <center> 2x3 </center> </td>

</tr>

</table>

 

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

Тэги, которые применяются для форматирования текста - те же, что для обычного текста.

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

Вертикальное выравнивание задается атрибутом valign="middle" , т.е. содержимое конкретной ячейки будет находиться в середине ячейки (top - наверху или bottom - внизу).

 

Пример:

<table>

<tr>

<td height="35" width="50" bgcolor="FFCC33" valign="top">

<center>1x1</center> </td>

<td width="50" bgcolor="336699"> <center>1x2</center> </td>

<td width="50" bgcolor="FFCC33" valign="bottom"> <center>1x3</center>

</td>

</tr>

<tr>

<td height="35" width="50" bgcolor="336699" valign="bottom">

<center>2x1</center> </td>

<td width="50" bgcolor="FFCC33"> <center>2x2</center> </td>

<td width="50" bgcolor="336699" valign="top"> <center>2x3</center>

</td>

</tr>

</table>

Таблица может создаваться с рамкой. Рамка вводится параметром border. Зададим рамку шириной 3 пикселя: <table border="3">.

Результат показан на рисунке 23.1.

Рисунок 23.1 – Таблица с закрашенным фоном ячеек

 







Дата добавления: 2014-11-10; просмотров: 143. Нарушение авторских прав

Studopedia.info - Студопедия - 2014-2017 год . (0.026 сек.) русская версия | украинская версия