Per definir vores usarem l'etiqueta border:
table, th, td {
border: 1px solid black;
}
Perquè ens mostri les vores juntes, com si fos només una sola línia usarem border-collapse:
table {
border-collapse: collapse;
}
L'alçada i amplada de cada cel.la o fila o de la taula la definim amb width i weight. Podem usar pixels, %, em etc.. i ho podem definir sobre la taula, sobre fila o sobre la columna:
table {
width: 100%;
}
th {
height: 50px;
}
Per definir l'alineació horizontal usarem text-align i per definir l'alineació vertical usarem vertical-align:
th {
text-align: left; }
td {
height: 50px;
vertical-align: bottom;
}
Per separar el contingut de les vores de la cel.la, usarem padding, ja sigui als td o als th
td {
padding: 15px;
}
Per afegir color a la taula, tenim diferents camins, si és per les vores ho definirem a border, si és pel fons de la taula usarem background-color i si és per el contingut usarem color.
table, td, th {
border: 1px solid green;
}
th {
background-color: green;
color: white;
}
Podem definir el tipus de lletra amb font-family
table {
font-family: Verdana; }
Per millorar la llegibilitat de la taula, podem fer l'efecte zebra. Una manera ràpida i fàcil ( no la única) es definir una classe per les files imparells o parells.
A continuació l'exemple complert:
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid green; font-family: Verdana; } table { border-collapse: collapse; width: 100%; } th { height: 50px; text-align: left; background-color: green; color: white; } td { height: 50px; vertical-align: bottom; } .fosc { background-color: #A7C942;} </style> </head> <body> <table> <tr> <th>Nom alumne</th> <th>Curs</th> </tr> <tr> <td>Pere</td> <td>ASIX</td> </tr> <tr class="fosc"> <td>Joan</td> <td>SMX</td> </tr> </table> </body> </html>
Cap comentari:
Publica un comentari a l'entrada