Tabulas struktūras veidošana
Veidojot tabulas, bieži rodas problēma apvienot dažas blakus šūnas vienā. Šim nolūkam izmanto parametrus colspan un rowspan. Colspan parāda, cik šūnas jāapvieno horizontālā virzienā. Rowspan parāda, cik šūnas jāapvieno vertikālā virzienā. Colspan un rowspan pievienojamas šūnu elementiem <th> vai <td>, to noklusētā vērtība ir "1".
Piemērs:
Kods:
<html>
<head>
<title>Piemērs</title>
</head>
<body>
<table width="200" height="100" cellspacing="2" cellpadding="2" border="2" bordercolor="#0000FF">
<tr>
<td rowspan="2">AAAAA</td>
<td>BBBBB</td>
</tr>
<tr>
<td>CCCCC</td>
</tr>
</table>
</body>
</html>
<head>
<title>Piemērs</title>
</head>
<body>
<table width="200" height="100" cellspacing="2" cellpadding="2" border="2" bordercolor="#0000FF">
<tr>
<td rowspan="2">AAAAA</td>
<td>BBBBB</td>
</tr>
<tr>
<td>CCCCC</td>
</tr>
</table>
</body>
</html>
Rezultāts:
Piemērs:
Kods:
<html>
<head>
<title>Piemērs</title>
</head>
<body>
<table width="300" height="150" cellspacing="2" cellpadding="2" border="3" bordercolor="#cd9b1d">
<tr>
<td>AAAAA</td>
<td>BBBBB</td>
<td>CCCCC</td>
</tr>
<tr>
<td colspan="3">DDDDD</td>
</tr>
</table>
</body>
</html>
<head>
<title>Piemērs</title>
</head>
<body>
<table width="300" height="150" cellspacing="2" cellpadding="2" border="3" bordercolor="#cd9b1d">
<tr>
<td>AAAAA</td>
<td>BBBBB</td>
<td>CCCCC</td>
</tr>
<tr>
<td colspan="3">DDDDD</td>
</tr>
</table>
</body>
</html>
Rezultāts:
Piemērs:
Kods:
<html>
<head>
<title>Piemērs</title>
</head>
<body>
<table width="90%" height="100" border="2" bordercolor="#cd3700" cellspacing="0">
<tr>
<th colspan="3">Virsraksts</th>
</tr>
<tr>
<td>2.rinda 1.kolonna</td>
<td rowspan="2">2.rinda 2.kolonna</td>
<td>2.rinda 3.kolonna</td>
</tr>
<tr>
<td>3.rinda 1.kolonna</td>
<td>3.rinda 3.kolonna</td>
</tr>
</table>
</body>
</html>
<head>
<title>Piemērs</title>
</head>
<body>
<table width="90%" height="100" border="2" bordercolor="#cd3700" cellspacing="0">
<tr>
<th colspan="3">Virsraksts</th>
</tr>
<tr>
<td>2.rinda 1.kolonna</td>
<td rowspan="2">2.rinda 2.kolonna</td>
<td>2.rinda 3.kolonna</td>
</tr>
<tr>
<td>3.rinda 1.kolonna</td>
<td>3.rinda 3.kolonna</td>
</tr>
</table>
</body>
</html>
Rezultāts:
Atsauce:
Tīmekļa lapu veidošana. HTML un CSS / Andris Kamars - Rīga: Apgāds Zvaigzne ABC, 2008. – 320 lpp.: il. – izmantotā literatūra: 38.-42. lpp.