HTML. Таблица.

     Таблица задается тэгом:<table>...</table>. В устройстве таблицы мы будем разбираться на простом примере.

Пример:

<html>
<head>
<title>Таблица</title>
</head>
</body>

<table border=1>             <!-- Начало таблицы-->          
<caption>
Наша таблица                 <!-- Заголовок таблицы-->
</caption>

<tr>                                <!-- Начало первой строки-->

<td>                               <!-- Начало первой ячейки-->
Первая строка, первая колонка
</td>                              <!-- Конец первой ячейки-->

<td>                               <!-- Начало второй ячейки-->
Первая строка, вторая колонка
</td>                              <!-- Конец второй ячейки-->

</tr>                              <!-- Конец первой строки-->

<tr>                               <!-- Начало второй строки-->

<td>                               <!-- Начало первой ячейки-->
Вторая строка, первая колонка
</td>                              <!-- Конец первой ячейки-->

<td>                               <!-- Начало второй ячейки-->
Вторая строка, вторая колонка
</td>                              <!-- Конец второй ячейки-->
</tr>                               <!-- Конец второй строки-->          
</table>                          <!-- Конец таблицы-->    
</body>
</html>

 

Результат:

Таблица
Наша таблица
Первая строка, первая колонка Первая строка, вторая колонка
Вторая строка, первая колонка Вторая строка, вторая колонка

 

     атрибут bgcolor- задаёт фон (цвет) для таблицы в целом, для ряда, для ячейки.

Пример:

<html>
<head>
<title>Таблица</title>
</head>
<body>
<table border=1>
<caption>
Наша таблица
</caption>
<tr>
<td bgcolor="#FFCC33">Первая строка, первая колонка </td>
<td bgcolor="#336699">Первая строка, вторая колонка </td>
</tr>
<tr> 
<td bgcolor="#336699">Вторая строка, первая колонка </td>
<td bgcolor="#FFCC33">Вторая строка, вторая колонка</td> 
</tr>
</table>
</body>
</html>

 

Результат:

Таблица
Наша таблица
Первая строка, первая колонка Первая строка, вторая колонка
Вторая строка, первая колонка Вторая строка, вторая колонка

 

     Соответственно, фон для ряда прописываем для тэга <tr>: <tr bgcolor="#336699">, а если вы хотите задать фон всей таблицы, то для тэга <table>: <table bgcolor="#336699">

атрибут height и атрибут width задают высоту и ширину для всей таблицы, для одного ряда, для ячейки.

Пример:

<html>
<head>
<title>Таблица</title>
</head>
<body>
<table border=1>
<caption>
Наша таблица
</caption>
<tr>
<td  height="100" width="200" bgcolor="#FFCC33">Первая строка, первая колонка </td>
<td width="200"  bgcolor="#336699">Первая строка, вторая колонка </td>
</tr>
<tr> 
<td height="100" width="200" bgcolor="#336699">Вторая строка, первая колонка </td>
<td width="200"  bgcolor="#FFCC33">Вторая строка, вторая колонка</td>
</tr>
</table>
</body>
</html>

 

Результат:

Таблица
Наша таблица
Первая строка, первая колонка Первая строка, вторая колонка
Вторая строка, первая колонка Вторая строка, вторая колонка

 

     Так же мы можем выравнять текст внутри таблицы. Для примера возьмем одну ячейку: <td height="70" width="170" bgcolor="#FFCC33"> <center> Первая строка, первая колонка </center> </td> или <td align=center height="70" width="170" bgcolor="#FFCC33"> Первая строка, первая колонка </td>. Атрибут align может принимать еще значения right и left. Такое выравнивание называется горизонтальным.
     Но, существует еще и вертикальное выравнивание. Оно задается атрибутом - valign="middle" (top, bottom)-в середине ячейки (наверху, внизу).

Пример:

<html>
<head>
<title>Таблица</title>
</head>
<body>
<table border=1>
<caption>
Наша таблица
</caption>
<tr>
<td height="100" width="200" bgcolor="#FFCC33"> <center>Первая строка, первая колонка </center></td> 
<td width="200"  bgcolor="#336699" valign="bottom">Первая строка, вторая колонка </td>
</tr>
<tr>
<td height="100" width="200" bgcolor="#336699" valign="top" >Вторая строка, первая колонка </td>
<td width="200"  bgcolor="#FFCC33" align=right  >Вторая строка, вторая колонка</td>
</tr>
</table>
</body>
</html>
 

Результат:

Таблица
Наша таблица
Первая строка, первая колонка
Первая строка, вторая колонка
Вторая строка, первая колонка Вторая строка, вторая колонка

 

 Смотрите также:
     Усложненная таблица. Атрибуты colspan и rowspan.
     Усложненная таблица. Пространство между ячейками.
Загрузка...