Самообучение HTML училище

Кратко ръководство по HTML за начинаещи


Автор: Joe Barta » Превод: Ан.Начев » Последна редакция: LeoS

Девети урок » (3852 посещения)

Нека сега да се отървем от 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://leofreesoft.com/">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

Не ми казвайте, че ви е писнало, а давайте нататък - малко остана...