HTML таблици

Таблиците в HTML се задават с тагове <table> и </table> - съответно за начало и за край. Таблиците се поделят на редици: <tr> и </tr>, а всяка редица може да се подели на отделни клетки, описани с <td> и </td>. Самото съдържание на клетката може да бъде текст, изображение, списъци или дори други таблици. Описанието на таблицата става ред по ред, като за всеки ред клетките се описват една по една от ляво на дясно.

Ето и един пример:

<table border="2">
<tr>
<td> име</td>
<td> фамилия </td>
</tr>
<td> Иван    </td>
<td> Иванов </td>
</tr>
</table>

В браузъра таблицата ще изглежда така:

Рамка на таблица

За да се покаже рамката на таблицата, трябва да укажете това изрично с border="a" в тага <table>, като на мястото на "а" сложите желаната дебелина на рамката в пиксели. Ако не искате таблицата да има рамка, просто не използвайте border - по подразбиране таблиците се показват без рамки.

Можете да експериментирате с различни големини на рамката за една примерна таблица: опитай сам

Заглавия в таблица

Заглавия като част от самата таблица можете да зададете между <th> и </th>, а заглавиетo на самата таблица се указва между <caption> и </caption>. Браузърът автоматично ще открои заглавията, зададени с <th> - обикновено с удебелен шрифт.

<table border="2">
<caption>Визитка</caption>
<tr>
<th> име</th>
<th> фамилия </th>
</tr>
<td> Иван    </td>
<td> Иванов </td>
</tr>
</table>

В браузъра таблицата ще изглежда така:

Клетки, които заемат повече от една редица или колона

Ако искате дадена клетка да заема примерно две колони, укажете това с colspan="2". Съответно за да заеме клетката две редици, трябва да включите rowspan="2" в тага td или th, с който създавате съответната клетка.

Можете да видите как изглежда примерен код и резултата от неговото изпълнение: опитай сам

Форматиране на клетки

Разстоянието от рамката на клетката до нейното съдържание се задава с cellpadding="a", като "a" е число в пиксели. Разстоянието от рамката на таблицата до самите клетки от своя страна се указва с cellspacing="a". И двете разстояния се указват още в началното <table>.

Ето и един пример, който можете да редактирате: опитай сам

Добавяне на фонов цвят

За да оцветите цялата таблица в един цвят, използвайте bgcolor="име-на-цвят" в table, като на мястото на име-на-цвят използвате някое от валидните имена за цвят в HTML. По същия начин се задава и цвят за отделна клетка, като разликата е само в мястото на дефиниране: вместо в table - в td. Вместо фонов цвят можете да сложите фоново изображение: background="име-на-файл.jpg", като разбира се на мястото на име-на-файл.jpg сложите името на изображението, което желаете за фон.

Следва пример, в който цялата таблица ще бъде в жълто, освен клетката, за която е зададен син фонов цвят. В допълнение в клетката долу вдясно е сложен един анимиран gif файл: опитай сам

Следва: HTML списъци

начало на страницата