Да добавим таблици - Урок 4

Нека сега да се отървем от CELLPADDING и CELLSPACING и да се върнем към първоначалната проста табличка.

<TABLE BORDER=3>

<TR>
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed Tom Rick
Larry Curly Mo


Прекрасна способност на браузерите е, че могат да "боядисват" таблиците в различни цветове. Използва се BGCOLOR също както и в <BODY> тага.

<TABLE BORDER=3 BGCOLOR="#FFCC66">

<TR>
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed Tom Rick
Larry Curly Mo


<TABLE BORDER=3>

<TR BGCOLOR="#FF9999">
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>

<TR BGCOLOR="#99CCCC">
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed Tom Rick
Larry Curly Mo


<TABLE BORDER=3>

<TR BGCOLOR="#FFCCFF">
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>

<TR>
<TD BGCOLOR="#FF0000">Larry</TD>
<TD>Curly</TD>
<TD BGCOLOR="#3366FF">Mo</TD>
</TR>

</TABLE>

Ed Tom Rick
Larry Curly Mo


Кодовете за някои цветове ще намерите тук. Използвайте ги за да избирате различни комбинации.

Още едно важно нещо за тези цветове...фонът на <TD> ще "надвие" фонът на <TR>, а той пък от своя страна "надвива" <TABLE> фона. Това разбира се има нужда от допълнително онагледяване, така че внимателно разгледайте следващия пример. (Кодът е оцветен за да знаете за кой цвят се отнася).

<TABLE BORDER=3 BGCOLOR="#FF6633">

<TR BGCOLOR="#009900">
<TD BGCOLOR="#9999FF">Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed Tom Rick
Larry Curly Mo


Нека отделим минута за да обясним нещо. Браузера интерпретира вашите инструкции по най-добрия възможен начин. Ако нещо не е указано както трябва, повечето браузери се справят с положението по един или друг начин и показват страницата във възможно най-привлекателен вид. Вие като автор на страницата си ще трябва да укажете на браузера, колкото се може повече неща за да няма пространство за интерпретации. Добър подход е да имате наколко копия от най-разпространените браузери за да си тествате "произведенията". Резултата изглежда различно на различните браузери. Добра идея също е да тествате страниците си на екрани с различна разделителна способност. За това говорихме в първата част на този самоучител.


Нека сега да си поиграем с COLSPAN (Column Span) и ROWSPAN (Row Span). Махаме клетката на Tom и се получава...

<TABLE BORDER=3>

<TR>
<TD>Ed</TD>
<TD>Rick</TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed Rick
Larry Curly Mo
Просто се получава празно място.


Ако искаме да "разтеглим" клетката на Ed и тя да включва две клетки по хоризонтала, ще се наложи да използваме COLSPAN.

<TABLE BORDER=3>

<TR>
<TD COLSPAN=2>Ed</TD>
<TD>Rick</TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed Rick
Larry Curly Mo


В контекста на това което ви обясних по-горе, че всеки браузер се опитва да поправя грешките ви, нека направим сега умишлено една грешка. Оставяме кода като си е, но връщаме клетката на Tom. Нека видим какво се получи.

<TABLE BORDER=3>

<TR>
<TD COLSPAN=2>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed Tom Rick
Larry Curly Mo
Да обобщим
1) Браузера винаги прощава грешките и се опитва да ги представи в най-добрия им вид.
2) От голямо значение е да можете да определите кое е важно в дадения html код и да не допускате противоречие в написаното за да премахнете малките изненади още в началото.
3) Нищо, което сте написали със средствата на html не е в състояние да "разбие" нечий браузер или операционна система. Независимо колко объркан код сте написали. Това за съжаление не може да се каже за програмките написани на JAVA.


Добре... да се върнем обратно на примера с Tom (горкият човек).

<TABLE BORDER=3>

<TR>
<TD COLSPAN=2>Ed</TD>
<TD>Rick</TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed Rick
Larry Curly Mo


Rick се уплашва и си отива. Ed заема цялото място от реда. Разгледайте направените корекции.

<TABLE BORDER=3>

<TR>
<TD COLSPAN=3 ALIGN=CENTER>Ed</TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed
Larry Curly Mo


Всички други html тагове и кодове могат да бъдат прилагани в клетката. Можем да направим Ed <STRONG>, примерно.

<TABLE BORDER=3>

<TR>
<TD COLSPAN=3 ALIGN=CENTER><STRONG>Ed</STRONG></TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed
Larry Curly Mo


Защо да не направим връзка към една от страниците ми.

<TABLE BORDER=3>

<TR>
<TD COLSPAN=3 ALIGN=CENTER>
<A HREF="http://eton.dir.bg/">
Ed</A></TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed
Larry Curly Mo


Нека сега да се отървем от всичко до тук, да върнем Rick и Tom и да обърнем повече внимание на <ROWSPAN>.

<TABLE BORDER=3>

<TR>
<TD>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>

<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed Tom Rick
Larry Curly Mo


Както вече сте се досетили <ROWSPAN> е на същия принцип като <COLSPAN> само че влияе на колоните, вместо на редовете. (Елементарно Уотсън !)
Ще премахнем Larry и ще оставим Ed да заеме цялата колонка.

<TABLE BORDER=3>

<TR>
<TD ROWSPAN=2>Ed</TD>
<TD>Tom</TD>
<TD>Rick</TD>
</TR>

<TR>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed Tom Rick
Curly Mo


Разбира се тези тагове могат да се използват и в комбинация.

<TABLE BORDER=3>

<TR>
<TD ROWSPAN=2>Ed</TD>
<TD COLSPAN=2>Tom</TD>
</TR>

<TR>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>

</TABLE>

Ed Tom
Curly Mo


<--ПРЕДИШЕН        СЛЕДВАЩ-->

Въведение Урок 1 Урок 2 Урок 3 Lesson 4 Урок 5 Урок 6 Полезни връзки Бърз html указател
БЕЗПЛАТНИ РЕСУРСИ ЗА ВАШАТА WEB СТРАНИЦА