Praneškite apie mus:


CSS lentelės

Įvertink
(0 balsai)
1 1

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

Gražios HTML/CSS lentelės nuotrauka :: kodai.manualai.lt pavyzdžiai

 

HTML kodas:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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;
}

pabandyk_pats


Atnaujinimo Data: Penktadienis, Birželio 04, 2010
Lukas

Lukas

Manualai.lt tinklo autorius ir administratorius. VDU Energetikos Fizikos ir Verslo Informatikos studentas. LinkedIn

E-mail: Šis el. pašto adresas yra apsaugotas nuo spam botų. Jum reikalingas įjungtas Javasctipt kad jį matytumėte
Login to post comments