Кратко ръководство по HTML за начинаещи
Автор: Joe Barta » Превод: Ан.Начев » Последна редакция: LeoS
Осми урок » (5151 посещения)
Да се върнем към добрия, стар Ed.
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD ALIGN=LEFT VALIGN=MIDDLE>Ed</TD>
</TR>
</TABLE>
Ed |
Ще махнем всякакви атрибути за align за да може кодът да е по-изчистен и ясен. Знаем какво ще се случи - браузерът ще приложи стойностите по подразбиране.
<TABLE BORDER=3 WIDTH=100 HEIGHT=75>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
Ed |
Сега да направим една примерна таблица.
<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
Ed |
Да разделим този ред на две клетки. Tom е приятел на Ed, но си иска отделна клетка.
<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD>Ed</TD>
<TD>Tom</TD>
</TR>
</TABLE>
Ed | Tom |
Когато няма изрични инструкции за широчината на клетките, те обикновено са различни по размер. Ето защо добра идея е да се указва широчината за всяка клетка. Само че винаги добре пресмятайте стойностите, за да не се получат смешни резултати.
<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD WIDTH=150>Ed</TD>
<TD WIDTH=150>Tom</TD>
</TR>
</TABLE>
Ed | Tom |
Този WIDTH
атрибут може да бъде изразен и в проценти.
<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD WIDTH=50%>Ed</TD>
<TD WIDTH=50%>Tom</TD>
</TR>
</TABLE>
Ed | Tom |
Нека дадем на Ed по-голяма клетка, защото все пак той е с нас от самото начало.
<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD WIDTH=80%>Ed</TD>
<TD WIDTH=20%>Tom</TD>
</TR>
</TABLE>
Ed | Tom |
Сега и Rick се върна и ще поиска собствена клетка. Трябва да решим колко пространство от редът ще можем да му отделим. Мисля, че 20% е съвсем честно. Ще ги вземем от процентите на Ed. Сами разбирате, че сборът от всички проценти трябва да е равен на 100.
<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD WIDTH=60%>Ed</TD>
<TD WIDTH=20%>Tom</TD>
<TD WIDTH=20%>Rick</TD>
</TR>
</TABLE>
Ed | Tom | Rick |
Трима приятели отсреща ще се присъединят към таблицата. Мисля, че ще е добре да им дадем техен собствен ред, нищо че са ни все още непознати.
<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD WIDTH=60%>Ed</TD>
<TD WIDTH=20%>Tom</TD>
<TD WIDTH=20%>Rick</TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
<TD>Mo</TD>
</TR>
</TABLE>
Ed | Tom | Rick |
Larry | Curly | Mo |
Атрибутите на WIDTH
от първият ред остават в сила и за втория. Ако случайно Mo си отиде, ние продължаваме да си имаме перфектно направена таблица, но с едно празно място.
<TABLE BORDER=3 WIDTH=300 HEIGHT=75>
<TR>
<TD WIDTH=60%>Ed</TD>
<TD WIDTH=20%>Tom</TD>
<TD WIDTH=20%>Rick</TD>
</TR>
<TR>
<TD>Larry</TD>
<TD>Curly</TD>
</TR>
</TABLE>
Ed | Tom | Rick |
Larry | Curly |
Нека върнем Мо и премахнем всички атрибути освен тези за BORDER
.
<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 |
Следващите няколко атрибута се наричат CELLPADDING
и CELLSPACING
. И двата се използват в <TABLE>
таг. CELLPADDING
определя количеството пространство между контура на клетката и нейното съдържание.
<TABLE BORDER=3 CELLPADDING=12>
<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 |
Стойността по подразбиране за този атрибут е 1 (единица). Ако заменим CELLSPACING
с CELLPADDING
получаваме малко по-различен ефект.
<TABLE BORDER=3 CELLSPACING=12>
<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 |
Стойността по подразбиране за CELLSPACING
е 2. Ние разбира се, можем да използваме тези атрибути в комбинация.
<TABLE BORDER=3 CELLSPACING=12 CELLPADDING=12>
<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 |
Сега не се колебайте, а докато сте във форма, чукнете онова нещо в дясно.