Оглавление

9.4. Ячейки таблицы

С помощью тега <td> описываются ячейки таблицы. Тег <td> имеет следующие параметры:
  -   align и vaiign выполняют те же функции, что и в теге <tr>;
  -   width и height определяют ширину и высоту ячейки в пикселах или в процентах;
  -   bgcolor указывает цвет фона ячейки; (1)

  -   col span задает количество объединяемых ячеек по горизонтали;
  -   rowspan указывает количество объединяемых ячеек по вертикали.

 

В качестве примера объединения ячеек возьмем наш первоначальный фрагмент кода (листинг 7) и объединим горизонтально расположенные ячейки 1 и 2 в одну (листинг 8).

 

Листинг 8. Объединение ячеек по горизонтали

<table border="l" width="600">
<caption>Заголовок тaблицы</caption>
 <tbody>
  <tr>
    <td align="center" colspan="2" >Ячейки 1 и 2 объединены</td>
  </tr>
  <tr>
    <td align="center" >Ячейка 3</td>
    <td align="center" >Ячейка 4</td>
  </tr>
 </tbody>
</table>

 

Заголовок тaблицы
Ячейки 1 и 2 объединены
Ячейка 3 Ячейка 4

 

Итак, мы заменили строку
 <td align="center">Ячейка 1</td>
на
 <td align="center" colspan="2" >Ячейки 1 и 2 объединены</td>
и при этом строка
 <td align="center">Ячейка 2</td>
была удалена.


Теперь объединим вертикально расположенные ячейки 1 и 3 в одну (листинг 9).

 

Листинг 9. Объединение ячеек по вертикали

<table border="l" width="600">
 <caption>Заголовок тaблицы</caption>
 <tbody>
  <tr>
   <td align="center" rowspan="2">Ячейки 1 и 3 oбъeдинeны</td>
   <td align="center">Ячейки 2</td>
  </tr>
  <tr>
   <td align="center">Ячейки 4</td>
  </tr>
 </tbody>
</table>

 

Заголовок тaблицы
Ячейки 1 и 3 oбъeдинeны           Ячейки 2         
          Ячейки 4         

 

В этом примере мы заменили строку
   <td align="center">Ячейка 1</td>
на
   <td align="center" rowspan="2">Ячейки 1 и 3 oбъeдинeны</td>
при этом строка
   <td align="center">Ячейка 3</td>
была удалена.

 

 

 

Листинг 10 Сложная таблица.

 

<table border="l" width="600">
	<tbody>
	<tr>
		<td rowspan="2">Ячейка 01, 11</td> 
		<td colspan="9">Ячейка 02, 03, 04, 05, 06, 07, 08, 09, 10</td>
	</tr> 
	<tr>
		<td>12</td> 
		<td>13</td> 
		<td>14</td> 
		<td>15</td> 
		<td>16</td> 
		<td>17</td> 
		<td>18</td> 
		<td>19</td>
		<td>20</td>
	</tr> 
	<tr>
		<td>Ячейка 21</td>
		<td>22</td> 
		<td>23</td> 
		<td>24</td> 
		<td>25</td> 
		<td>26</td> 
		<td>27</td> 
		<td>28</td> 
		<td>29</td>
		<td>30</td>
	</tr> 
	</tbody>
</table>

 

Ячейка 01, 11 Ячейка 02, 03, 04, 05, 06, 07, 08, 09, 10
12 13 14 15 16 17 18 19 20
Ячейка 21 22 23 24 25 26 27 28 29 30

 

 


Тег <th> позволяет указать ячейки, которые являются заголовочными. Содержимое таких ячеек выделяется полужирным шрифтом и размещается по центру. Во всем остальном тег <th> аналогичен тегу <td>. Листинг 1.10 демонстрирует возможность выделения ячеек с помощью тега <th>.

 

Листинг 11. Выделение ячеек таблицы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
             "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Выделение ячеек таблицы</title>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" >
</head>
<body>
 <table border="l" width="500">
  <caption>Заголовок тaблицы</caption>
  <thead>
   <tr>
    <th>Марка</th>
    <th>Цвет</th>
    <th>Год выпуска</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>ВA3-2109</td>
    <td>Красный</td>
    <td>2008</td>
   </tr>
   <tr>
    <td>Москвич-412</td>
    <td>Белый</td>
    <td>1978</td>
   </tr>
  </tbody>
 </table>
</body>
</html>

 

Заголовок тaблицы
Марка Цвет Год выпуска
BA3-2109 Красный 2008
Москвич-412 Белый 1978
Примечания:
  • Параметры width, height и bgcolor являются устаревшими и поддерживаются только в формате Transitional. Использование в формате strict недопустимо.
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити