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

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


Perskaityta: 3557 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?
Komentarai

Komentarų nėra. Norėdami komentuoti turite prisijungti