Преглед на урок

Въведение в таблиците

Въведение в таблиците




Работата с HTML таблици наподобява работата с програма за електронни таблици. Една HTML таблица има редове и колони. Там, където се пресичат ред и колона, се получава клетка. Всяка отделна клетка е предвидена да бъде контейнер за данни. HTML табличните клетки могат да съдържат почти всякакъв текст или HTML елементи, от обикновен текст до изображения и други.
Всяка HTML таблица започва и завършва с тези два елемента, които са проектирани да съдържат всички елементи, необходими за създаването на таблица и се намират между елементите <body> и </body>:
<table>
</table>

За да направите редовете на своята таблица трябва да въведете следните два тага между <table> и </table>, съответно за начало и край на реда:
<tr>
</tr>

За направата на клетки има две двойки различни елементи. Първите, които ще напиша се използват най-често за заглавните клетки на таблицата (защото са с удебелен шрифт), а другите са обикновенните таблични клетки.
Заглавните клетки се въвеждат в таблицата с помоща на тези два тага:
<th>
</th>

Обикновенните клетки с тези:
<td>
</td>

За сега гледайте всеки ред от таблицата ви да има еднакъв брой клетки, а по-нататък в други уроци ще обясня как може първия ред да има две клетки примерно, а втория три.

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

Забележка: Всяка таблица може да съдържа само един заглавен ред в зависимост от това къде искате да се намира той (над или под таблицата), можете да добавите следните неща в контейнера <caption>:
<caption align="top">Заглавие</caption>
ако искате заглавието да се намира над таблицата.
И ако искате да се намира под таблицата:
<caption align="bottom">Заглавие</caption>

Забележка: Ако не поставите align, заглавието ще седи на мястото по подразбиране, а именно над таблицата.

Сега да видим какво получихме до сега:

Код
<table>
<caption>Заглавие</caption>
<tr><th>заглавие на колона 1</th><th>заглавие на колона 2</th><th>заглавие на колона 3</th></tr>
<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>
</table>

Ако направите следния пример ще видите, че на таблицата ви и липсват рамки. За добавянето им просто в контейнера <table> добавете следното:
<table border="1">
</table>

Като рамката може да бъде само цяло число, което описва броя на пикселите на рамката.

Ето сега и крайният резултат от таблицата ни:


Код
<!DOCTYPE html
	PUBLIC "\//W3C//DTD XHTML 1.0 Strict//EN"
	"DTD/xhtml1-strict1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Studio-bg.com - Уроци на български език</title>
</head>
<body>
<table border="1">
<caption>Заглавие</caption>
<tr><th>заглавие на колона 1</th><th>заглавие на колона 2</th><th>заглавие на колона 3</th></tr>
<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>
</table>
</body>
</html>

Автор: Adrian


Ако урокът ви допада, споделете го в Twitter и Facebook или го запазете в Delicious.




Урокът е добавен от: toddor

Добави коментар

Трябва да сте регистиран потребител за може да оставяте коментари! Направете своята безплатна регистрация още сега.