GGbitBG
Would you like to react to this message? Create an account in a few clicks or log in to continue.
GGbitBG

ggbitbg
 
ИндексИндекс  Последни снимкиПоследни снимки  ТърсенеТърсене  Регистрирайте сеРегистрирайте се  ВходВход  

 

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

Go down 
АвторСъобщение
Admin
Administrators
Administrators
Admin


Брой мнения : 57
Join date : 17.05.2009
Age : 114
Местожителство : plovdiv

Въведение в таблиците Empty
ПисанеЗаглавие: Въведение в таблиците   Въведение в таблиците EmptyПон Май 18, 2009 4:43 am

Работата с 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>
Върнете се в началото Go down
http://ggbit-forum.vampire-legend.com
 
Въведение в таблиците
Върнете се в началото 
Страница 1 от 1

Права за този форум:Не Можете да отговаряте на темите
GGbitBG :: Уроци :: CSS и HTML-
Идете на: