Praneškite apie mus:


CSS lentelės

0

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:

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


Perskaityta: 3855 kartų

Lukas
Autorius: Lukas
El. paštas.: Šis el. pašto adresas yra apsaugotas nuo spam botų. Jum reikalingas įjungtas Javasctipt kad jį matytumėte
Manualai.lt tinklo autorius ir administratorius. VDU Energetikos Fizikos ir Verslo Informatikos studentas. LinkedIn
Raktažodžiai
html    pradmenys    css    lentelės    style    stilius    pavyzdys   
Patinka straipsnis?
dalintis Facebook
dalintis MySpace
dalintis Twitter
Digg it
Komentarai

Komentarų nėra. Norėdami komentuoti turite prisijungti
CSS meniu
Naudingos nuorodos
Informacija ir viskas kas yra pateikta manualai.lt puslapiuose yra nemokama, tačiau, galite mus paremti per PayPal: