Кратко ръководство по HTML за начинаещи
Автор: Joe Barta » Превод: Ан.Начев » Последна редакция: LeoS
Девети урок » (4547 посещения)
Нека сега да се отървем от 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 | |
Не ми казвайте, че ви е писнало, а давайте нататък - малко остана...