Teorija

CSS pielietošana tabulām
Piemērs:
Piemērā parādīta ar CSS līdzekļiem izveidota 4 šūnu tabula ar iekrāsotām šūnām un tabulas malām.
 
<html>
<head>
<title>Tabulas</title>
<style type="text/css">
table {
border:5px solid #66cd00;
background:#0000FF;
border-spacing:100px}
td {
border:10px solid sandybrown;
background:#eeeeee}
</style>
</head>
<body>
<table>
<tr>
  <td>Teksts 1</td>
  <td>Teksts 2</td>
</tr>
<tr>
  <td>Teksts 3</td>
  <td>Teksts 4</td>
</tr>
</table>
</body>
</html>
Rezultāts:
 
b50.png
 
Piemērs:
Piemērā parādīta tabulas apmales sapludināšana ar šūnu apmali, izmantojot īpašību border-collapse:collapse. Tabula tiek attēlota bez atstarpēm starp tabulas rāmi un šūnu rāmjiem.
 
<html>
<head>
<title>border collapse</title>
<style type="text/css">
table {
border-collapse:collapse;
background:#0000ff}
td {
border:5px solid blue;
background:#e0eeee}
</style>
</head>
<body>
<table>
  <tr>
    <td>Teksts 1</td>
    <td>Teksts 2</td>
  </tr>
  <tr>
    <td>Teksts 3</td>
    <td>Teksts 4</td>
  </tr>
</table>
</body>
</html>
Rezultāts:
 
b51.png
 
Piemērs:
Piemērā parādīta tabulas apmales atdalīšana no šūnu apmales, izmantojot īpašību border-collapse:separate. Tabula tiek attēlota ar atstarpēm starp tabulas rāmi un šūnu rāmjiem.
 
<html>
<head>
<title>Tabula</title>
<style type="text/css">
table {border-collapse:separate}
#A td{
background:#cdc8b1;
border:1px solid #000000;
padding:5px 10px 5px 10px}
#A tr.B td {background:#0099cc}
</style>
</head>
<body>
<table id="A">
  <tr>
     <td>Tekst 1</td>
  </tr>
  <tr class="B">
     <td>Tekst 2</td>
  </tr>
  <tr>
     <td>Tekst 3</td>
  </tr>
</table>
</body>
</html>
Rezultāts:
 
b52.png
 
Ar īpašības caption-side palīdzību var pievienot tabulas virsrakstu dažādās vietās attiecībā pret tabulu.
 
Piemērs:
Piemērā šūnas ir parādītas bez apmalēm.
 
<html>
<head>
<title>caption-side</title>
<style type="text/css">
table {caption-side: bottom; border:2px solid blue}
</style>
</head>
<body>
<table>
<caption>Uzraksts</caption>
<tr>
  <td>Teksts 1</td><td>Teksts 2</td><td>Teksts 3</td>
</tr>
<tr>
  <td>Teksts 4</td><td>Teksts 5</td><td>Teksts 6</td>
</tr>
<tr>
  <td>Teksts 7</td><td>Teksts 8</td><td>Teksts 9</td>
</tr>
</table>
</body>
</html>
Rezultāts:
 
b53.png
 
Piemērs:
<html>
<head>
<title>Tabula</title>
<style type="text/css">
table {
border-spacing:10px 10px;
border:2px outset}
td {
border:10px inset;
border-color:#eead0e;
padding: 12px 10px}
</style>
</head>
<body>
<table>
  <tr>
     <td>Teksts 11</td>
     <td>Teksts 12</td>
     <td>Teksts 13</td>
  </tr>
  <tr>
     <td>Teksts 21</td>
     <td>Teksts 22</td>
     <td>Teksts 23</td>
  </tr>
  <tr>
     <td>Teksts 31</td>
     <td>Teksts 32</td>
     <td>Teksts 33</td>
  </tr>
</table>
</body>
</html>
Rezultāts:
 
b54.png
 
Piemērs:
<html>
<head>
<title>Tabula</title>
<style type="text/css">
table {margin:2em}
td {
text-align:center;
border:3px solid green;
width:70px;
height:50px}
</style>
</head>
<body>
<table style="empty-cells:show">
<tr><td>Teksts 1</td><td></td><td></td><td></td></tr>
<tr><td>Teksts 2</td><td>Teksts 3</td><td></td><td></td></tr>
<tr><td>Teksts 4</td><td>Teksts 5</td><td>Teksts 6</td><td></td></tr>
<tr><td>Teksts 7</td><td>Teksts 8</td><td>Teksts 9</td><td>Teksts 10</td></tr>
</table>
</body>
</html>
Rezultāts:
 
b55.png
 
Piemērs:
Piemērā parādīta īpašība table-layout, kas palīdz Web lapu veidotājiem norādīt, kā tabulas platums ir saistīts ar tabulā esošo informāciju. Vērtība fixed nosaka maksimālo šūnas platumu, bet vērtība auto nosaka, ka šūnas izmērs atkarīgs no teksta lieluma.
 
<html>
<head>
<title>table-layout</title>
<style type="text/css">
table {width: 100%}
td {border:1px solid #000; vertical-align:top; overflow:hidden}
</style>
</head>
<body>
<h2>tabula bez platuma uzdošanas</h2>
<table>
  <tr>
     <td>Teksts 1</td>
     <td>Teksts 2</td>
     <td>Teksts 3</td>
  </tr>
</table>
<h2>table-layout:fixed</h2>
<table style="table-layout:fixed">
  <tr>
     <td>Teksts 4</td>
     <td>Teksts 5</td>
     <td>Teksts 6 </td>
  </tr>
</table>
<h2>table-layout:fixed ar atsevišķu platuma norādi</h2>
<table style="table-layout:fixed">
  <tr>
     <td style="width:25%">width:25%</td>
     <td style="width:120px">width:120px Teksts 7</td>
     <td>Teksts 8 </td>
  </tr>
</table>
<h2>table-layout:fixed ar platuma uzdošanu visās šūnās</h2>
<table style="table-layout: fixed">
  <tr>
     <td style="width:15%">width:15%</td>
     <td style="width:25%">width:25%</td>
     <td style="width:35%">width:35%</td>
  </tr>
</table>
</body>
</html>
Rezultāts:
 
b56.png
 
Piemērs:
Piemērā parādīta tabulas šūnu dažādu krāsu un veidu apmaļu iestatīšana.
 
<html>
<head>
<title>Tabulas apmale</title>
</head>
<body>
<table border="0">
<tr>
<th colspan="3">Tabula 1</th>
</tr>
<tr>
   <td style="border:medium solid green">Teksts 1</td>
   <td style="border:medium dashed blue">Teksts 2</td>
   <td style="border:medium dotted red">Teksts 3</td>
</tr>
</table>
<table border="0" style="border-collapse:collapse">
<tr>
<th colspan="3">Tabula 2</th>
</tr>
<tr>
   <td style="border:medium solid sandybrown">Teksts 4</td>
   <td style="border:medium dashed #0ff000">Teksts 5</td>
   <td style="border:medium dotted blue">Teksts 6</td>
</tr>
</table>
</body>
</html>
Rezultāts:
 
b57.png
 
Piemērs:
Krāsas iestatīšana šūnu apmalēm un tabulas rāmim.
 
<html>
<head>
<title>Stila iestatīšana tabulai</title>
<style type="text/css">
td {border:medium solid blue}
</style>
</head>
<body>
<table style="border:thick solid red">
  <tr>
     <td>Teksts 1</td>
     <td>Teksts 2</td>
     <td>Teksts 3</td>
  </tr>
</table>
<table style="border:thick solid green">
  <tr>
     <td>Teksts 4</td>
     <td>Teksts 5</td>
     <td>Teksts 6</td>
  </tr>
</table>
</body>
</html>
Rezultāts:
 
b58.png
 
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: 247.-262. lpp.