HTML Таблици
Публикувана от smilev на January 17 2011 14:16:52
Разширена новина
Таблици
Таблиците са важен инструмент при създаването на една уеб-страница. Често цялата страница е разположена в таблица, чиито редове и колони оформят различните части на HTML-документа.
Таблиците в HTML-документа са разположени между двата основни тага <table> и </table>.
Между тези два тага се изписват:
1. таговете за табличен ред - <tr> и </tr>
2. таговете за таблична клетка, чрез които се оформят редовете и колоните - <td> и </td>
За да има таблицата видими очертания трябва в тага table да се добави атрибута border и да му се зададе някаква стойност, например 1.
ПРИМЕР за таблица с 1 колона и 3 реда:
<table border="1">
<tr>
<td>1-ви ред, 1-ва колона</td>
</tr>
<tr>
<td>2-ри ред, 1-ва колона</td>
</tr>
<tr>
<td>3-ти ред, 1-ва колона</td>
</tr>
</table>
Ефекта в браузъра е следния:
ПРИМЕР за таблица с 1 ред и 3 колони:
<table border="1">
<tr>
<td>1-ви ред, 1-ва колона</td>
<td>1-ви ред, 2-ра колона</td>
<td>1-ви ред, 3-та колона</td>
</tr>
</table>
Ефекта в браузъра е следния:
ПРИМЕР за таблица с 2 реда и 2 колони:
<table border="1">
<tr>
<td>1-ви ред, 1-ва колона </td>
<td>1-ви ред, 2-ра колона </td>
</tr>
<tr>
<td>2-ри ред, 1-ва колона </td>
<td>2-ри ред, 2-ра колона </td>
</tr>
</table>
В прозореца на браузъра този код ще изглежда така:
ДРУГИ ТАГОВЕ, КОИТО СЕ ПОЛЗВАТ В ТАБЛИЦИТЕ
1. Чрез тага <th> </th> се задава заглавие на таблицата. Всеки текст разположен между таговете <th> и </th> се показва в центъра на клетката и удебелен.
ПРИМЕР:
<table border="1">
<tr>
<th>Заглавие 1</th>
<th>Заглавие 2</th>
</tr>
<tr>
<td>1-ви ред, 1-ва колона</td>
<td>1-ви ред, 2-ра колона</td>
</tr>
<tr>
<td>2-ри ред, 1-ва колона</td>
<td>2-ри ред, 2-ра колона</td>
</tr>
</table>
В браузера ефекта ще е следния:
2. Таговете <thead> </thead>, <tfoot> </tfoot> и
<tbody> </tbody> позволяват групиране на редовете на таблицата.
Една таблица може да съдържа горна част (head), долна част (foot) и средна част или "тяло" (body). Ако в тялото (средната част) на таблицата е поместена много информация, уеб-дизайнера ще "загуби от поглед" горната и долната част на таблицата. За удобство и прегледност в текстовия редактор, където се пише HTML-кода, чрез таговете <thead>, <tfoot> и <tbody> горната и долната част на таблицата могат да се групират непосредствено една под друга, а "тялото", т.е. средната част на таблицата да се изпише най-отдолу. В браузъра горната част на таблицата ще се показва най-горе, средната част - по средата и долната част - най-долу.
ПРИМЕР:
<table border="1">
<thead>
<tr>
<td>Горна част на таблицата, която се изписва горе</td>
</tr>
</thead>
<tfoot>
<tr>
<td>Долна част на таблицата, която се изписва по средата</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Средна част на таблицата, която се изписва долу</td>
</tr>
</tbody>
</table>
Ефекта от горния код е следния: