CSS lentelės

Lukas

Gerai pritaikius CSS kalbos galimybes su lentelių html žymėmis galime padaryti greitai kraunamas ir gražiai atrodančias lenteles. Pateikiu vieną lentelę, kuri padaryta pilnai su CSS ir HTML.

Pavyzdys

HTML kodas:

<table summary="Lentelė">
  <thead>
    <tr>
      <th scope="col">Antraštė</th>
      <th scope="col">1 stulpelis</th>
      <th scope="col">2 stulpelis</th>
      <th scope="col">3 stulpelis</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="4"><em>Pavyzdinė lentelė su betkokiais duomenimis</em></td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Pavadinimas</td>
      <td>reikšmė</td>
      <td>reikšmė</td>
      <td>reikšmė</td>
    </tr>
    <tr>
      <td>Pavadinimas</td>
      <td>reikšmė</td>
      <td>reikšmė</td>
      <td>reikšmė</td>
    </tr>
    <tr>
      <td>Pavadinimas</td>
      <td>reikšmė</td>
      <td>reikšmė</td>
      <td>reikšmė</td>
    </tr>
    <tr>
      <td>Pavadinimas</td>
      <td>reikšmė</td>
      <td>reikšmė</td>
      <td>reikšmė</td>
    </tr>
  </tbody>
</table>

CSS kodas:

table  {
	border-collapse:collapse;
	font-family:"Lucida Sans Unicode","Lucida Grande",Sans-Serif;
	font-size:12px;
	margin:15px;
	text-align:left;
	width:500px;
}
table thead th {
	background-color:#e8b9ff;
}
 
table th {
	background-color: #e8b9ff;
	color:#003399;
	font-size:13px;
	font-weight:normal;
	padding:8px;
}
table td {
	background-color:#f7d0ff;
	border-top:1px solid #FFFFFF;
	color:#666699;
	padding:8px;
}
 
table tfoot td {
	background-color: #f7d0ff;
	text-align:center;
}
table tbody tr:hover td {
	background:#fee9ff;
	cursor:pointer;
}