Перейти на главную   
  helloworld.ru - документация и книги по программированию  
helloworld.ru - документация и книги по программированию    
    главная     хостинг     форум     каталог ссылок    
Поиск по сайту:  
Смотрите также
Языки программирования
C#
MS Visual C++
Borland C++
C++ Builder
Visual Basic
Quick Basic
Turbo Pascal
Delphi
JavaScript
Java
PHP
Perl
Assembler
AutoLisp
Fortran
Python
1C

Интернет-технологии
HTML
VRML
HTTP
CGI
FTP
Proxy
DNS
протоколы TCP/IP
Apache

Web-дизайн
HTML
Дизайн
VRML
PhotoShop
Cookie
CGI
SSI
CSS
ASP
PHP
Perl

Программирование игр
DirectDraw
DirectSound
Direct3D
OpenGL
3D-графика
Графика под DOS

Алгоритмы
Численные методы
Обработка данных

Системное программирование
Драйверы

Базы данных
MySQL
SQL

Другое


Друзья
demaker.ru
Реклама

Лучший хостинг. Аренда серверов




helloworld.ru

Как правильно оформить таблицу

Начнем с азов... Таблица представляет из себя конструкцию <TABLE><TBODY><TR><TH или TD> ... </TH или /TD></TR></TBODY></TABLE> (я не буду вдаваться в дебри с <THEAD> и <TFOOT>:).

  • <TABLE> может иметь следующие атрибуты:

<TABLE
ALIGN="left|right"
BACKGROUND="URL_of_image"
BGCOLOR="#rrggbb|colour name"
BORDER="value"
BORDERCOLOR="#rrggbb|colour name"
BORDERCOLORLIGHT="#rrggbb|colour name"
BORDERCOLORDARK="#rrggbb|colour name"
CELLPADDING="value"
CELLSPACING="value"
CLASS="Style Sheet Class"
COLS="n"
DATAPAGESIZE="No. of records to show"
DATAFLD="Column Name"
DATASRC="Data Source"
FRAME="void|above|below|hsides|lhs|rhs|vsides|box"
HEIGHT="value|value%"
ID="Unique Identifier"
LANG="Language"
LANGUAGE="Scripting Language"
RULES="none|basic|rows|cols|all"
STYLE="Styling"
TITLE="Informational ToolTip"
VALIGN="top|bottom"
WIDTH="value|value%"
>

  • <TBODY> - определение глобальных переменных для таблицы (только IE):

<TBODY
ALIGN="Alignment"
BGCOLOR="#rrggbb|Colour Name"
CLASS="Style Sheet Class"
ID="Idenitifier"
LANG="Styling"
LANGUAGE="Styling"
STYLE="Styling"
TITLE="Informational ToolTip"
VALIGN="Vertical alignment"
>

  • <TR> - определение строки:

<TR
ALIGN="left|center|right"
BACKGROUND="URL_of_image"
BGCOLOR="#rrggbb|colour name"
BORDERCOLOR="#rrggbb|colour name"
BORDERCOLORLIGHT="#rrggbb|colour name"
BORDERCOLORDARK="#rrggbb|colour name"
CLASS="Style Sheet Class"
ID="Unique Identifier"
LANG="Language"
LANGUAGE="Scripting Language"
STYLE="Styling"
TITLE="Informational ToolTip"
VALIGN="top|middle|bottom"
>

  • <TH> - заголовок таблицы:

<TH
ALIGN="left|center|right"
BACKGROUND="URL_of_image"
BGCOLOR="#rrggbb|colour name"
BORDERCOLOR="#rrggbb|colour name"
BORDERCOLORLIGHT="#rrggbb|colour name"
BORDERCOLORDARK="#rrggbb|colour name"
CLASS="Style Sheet Class"
COLSPAN="Columns to span"
HEIGHT="value|value%"
ID="Unique Identifier"
LANG="Language"
LANGUAGE="Scripting Language"
NOWRAP
ROWSPAN="value"
STYLE="Styling"
TITLE="Informational ToolTip"
VALIGN="top|middle|bottom"
WIDTH="value|value%"
>

  • <TD> - ячейка таблицы:

<TD
ALIGN="left|center|right"
BACKGROUND="URL_of_image"
BGCOLOR="#rrggbb|colour name"
BORDERCOLOR="#rrggbb|colour name"
BORDERCOLORLIGHT="#rrggbb|colour name"
BORDERCOLORDARK="#rrggbb|colour name"
CLASS="Style Sheet class"
COLSPAN="value"
HEIGHT="value|value%"
ID="Unique Identifier"
LANG="Language"
LANGUAGE="Scripting Language"
NOWRAP
ROWSPAN="value"
STYLE="Style"
TITLE="Informational ToolTip"
VALIGN="top|middle|bottom"
WIDTH="value|value%"
>

Как вы поняли - это было вступление... а теперь - основная часть (жаль, что нельзя звук включить:-)):

  • Что такое BORDER и с чем его едят:
 
<table border="1">
 
<table border="5">

Можно еще 0 его приравнять, чтобы скрыть совсем... Разница ясна?

  • Теперь - об объединении строк и столбцов:
   
 
объединенная ячейка выглядит как: <td rowspan="2">
 
   
объединенная ячейка выглядит как: <td colspan="2">
  • А теперь - как красиво (и правильно!) "окантовать" таблицу:

 

 

 

 

 

"...как это сделано?" - все очень просто - помещаем одну таблицу в другую, у первой таблицы выставляем цвет фона, например bgcolor="#000000", ширину border-а приравниваем 0, cellspacing="0", cellpadding="1" (это и есть тот 1 пиксель черного цвета):

<table border="0" bgcolor="#000000" cellspacing="0" cellpadding="1">
<tr>
<td>
<table border="0" width="100%" bgcolor="#FFFFFF">
<tr>
<td>&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>

  • Окантовка ячеек:
 

 

 

 

   
 

 

 

 

   
 

 

 

 

   

<table border="0" bgcolor="#000000" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<table border="0" width="100%" cellspacing="1" cellpadding="0">
<tr>
<td bgcolor="#FFFFFF">&nbsp;</td>
<td bgcolor="#FFFFFF">&nbsp;</td>
<td bgcolor="#FFFFFF">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">&nbsp;</td>
<td bgcolor="#FFFFFF">&nbsp;</td>
<td bgcolor="#FFFFFF">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">&nbsp;</td>
<td bgcolor="#FFFFFF">&nbsp;</td>
<td bgcolor="#FFFFFF">&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>

Мысль ясна? - мы в таблицу с фоном: border="0" bgcolor="#000000" cellspacing="0" cellpadding="0" (ширину сами укажите), кладем другую, без фона с border="0" width="100%" cellspacing="1" cellpadding="0"... вот.

  • Таблица с горизонтальными линиями:
 

 

 

 

1-1 1-2 1-3
 

 

 

 

2-1 2-2 2-3
 

 

 

 

3-1 3-2 3-3

<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td width="100%" colspan="4"><img border="0" src="1x1.gif" width="1" height="1"></td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td width="100%" colspan="4"><img border="0" src="1x1.gif" width="1" height="1"></td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
<tr>
<td width="100%" colspan="4"><img border="0" src="1x1.gif" width="1" height="1"></td>
</tr>
</table>

А здесь мы просто каждую вторую строку объединяем, задаем у нее цвет фона и помещаем в нее однопиксельный прозрачный GIF.

 

 

 











helloworld.ru © 2001-2014
Все права защищены
Rambler's Top100 TopList Rambler's Top100 Fair.ru пїЅпїЅпїЅпїЅпїЅпїЅпїЅ пїЅпїЅпїЅпїЅпїЅпїЅ