Объединение столбцов

Объединение столбцов

Иногда вам может понадобиться, занимала не один, а несколько столбцов. Атрибут colspan может быть использован с элементами th и td для обозначения, сколько столбцов должна занимать ячейка.

<html>
<head>
<title>Объединение столбцов</title>
<style type="text/css">
table {
border: none;}
th, td {
border: none;
background-color: #dddddd;
padding: 5px;
width: 100px;}
</style>
</head>
<body>
<table>
<tr>
<th></th>
<th>9am</th>
<th>10am</th>
<th>11am</th>
<th>12am</th>
</tr>
<tr>
<th>Понедельник</th>
<td colspan="2">География</td>
<td>Музыка</td>
<td>ИЗО</td>
</tr>
<tr>
<th>Вторник</th>
<td colspan="3">Физкультура</td>
<td>География</td>
</tr>
</table>
</body>
</html>

 

9am 10am 11am 12am
Понедельник География Музыка ИЗО
Вторник Физкультура География

Кроме того, вам может понадобиться сделать так чтобы одна ячейка занимала несколько строк. Атрибут rowspan может быть использован с элементами th и td для обозначения.


Объединение строк.

<html>
<head>
<title>Объединение строк</title>
<style type="text/css">
table {
border: none;}
th, td {
border: none;
background-color: #dddddd;
padding: 5px;
width: 100px;}
</style>
</head>
<body>
<table>
<tr>
<th></th>
<th>TV1000</th>
<th>ТНТ</th>
<th>СТС</th>
</tr>
<tr>
<th>20:00-21:00</th>
<td rowspan="2">Фильм</td>
<td>Ток-шоу</td>
<td>Юмор</td>
</tr>
<tr>
<th>21:00-22:00</th>
<td>Ток-шоу</td>
<td>Мультфильм</td>
</tr>
</table>
</body>
</html>

 

TV1000 ТНТ СТС
20:00-21:00 Фильм Ток-шоу Юмор
21:00-22:00 Ток-шоу Мультфильм

Ширина и промежуток.

Существует несколько устаревших атрибутов, вытесненных каскадными таблицами стилей (CSS).Использование этих атрибутов не рекомендуется, однако вы можете встретить их при просмотре исходного кода старых сайтов.


 

<html>
<head>
<title>Старый код: ширина и промежуток</title>
<style type="text/css">
th, td {
background-color: #dddddd;}
</style>
</head>
<body>
<table width="400" cellpadding="10" cellspacing="5">
<tr>
<th width="150"></th>
<th>Снято с карты</th>
<th>Кредит</th>
<th width="150">Баланс</th>
</tr>
<tr>
<th>Январь</th>
<td>2500.00</td>
<td>6600.50</td>
<td>4100.50</td>
</tr>
<tr>
<th>Февраль</th>
<td>1350.50</td>
<td>8950.20</td>
<td>11700.10</td>
</tr>
</table>
</body>
</html>

 

Снято с карты Кредит Баланс
Январь 2500.00 6600.50 4100.50
Февраль 1350.50 8950.20 11700.10

Границы и заливка.

Атрибут border используется с элементами table

<html>
<head>
<title>Старый код: границы и заливка</title>
</head>
<body>
<table border="2" bgcolor="#efefef">
<tr>
<th width="150"></th>
<th>Снято с карты</th>
<th>Кредит</th>
<th width="150" bgcolor="#cccccc">Баланс</th>
</tr>
<tr>
<th>Январь</th>
<td>2500.00</td>
<td>6600.50</td>
<td bgcolor="#cccccc">4100.50</td>
</tr>
<tr>
<th>Февраль</th>
<td>1350.50</td>
<td>8950.20</td>
<td bgcolor="#cccccc">11700.10</td>
</tr>
</table>
</body>
</html>

 

Снято с карты Кредит Баланс
Январь 2500.00 6600.50 4100.50
Февраль 1350.50 8950.20 11700.10
Понравилась статья? Поделиться с друзьями:
Блог Измайлова Павла
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: