Перейти на главную   
  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-2016
Все права защищены
Rambler's Top100 TopList Rambler's Top100