HTML. Усложненная таблица. Атрибуты colspan и rowspan.

     За расстояние между ячейками в таблице отвечает атрибут cellspacing, который размещается в теге <table>. Для более красивейшего эффекта выставим cellspacing="5" и border=5.

Пример:

<html>
<head>
<title>Таблица</title>
</head>
<body>
<table border=5 cellspacing="5">
<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>

 

Результат:

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

 

     Как видите получилась стильная таблица с расстоянием между ячейками 5 . Чтобы убрать пространство между ячейками необходимо выставить cellspacing, равный нулю.
     Существует ещё и атрибут cellpadding, который задает поля ячейки. Чтобы было более понятно взгляните на пример ниже.

Пример:

<html>
<head>
<title>Таблица</title>
</head>
<body>
<table border=5 cellspacing="5" cellpadding="15">
<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>

 

Результат:

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

 

 Смотрите также:
Загрузка...