CSS - Tabelle
Questo tutorial ti insegnerà come impostare diverse proprietà di una tabella HTML utilizzando CSS. È possibile impostare le seguenti proprietà di una tabella:
Il border-collapse specifica se il browser deve controllare l'aspetto dei bordi adiacenti che si toccano o se ogni cella deve mantenere il proprio stile.
Il border-spacing specifica la larghezza che dovrebbe apparire tra le celle della tabella.
Il caption-sidele didascalie sono presentate nell'elemento <caption>. Per impostazione predefinita, questi vengono visualizzati sopra la tabella nel documento. Si utilizza la proprietà caption-side per controllare il posizionamento della didascalia della tabella.
Il empty-cells specifica se il bordo deve essere mostrato se una cella è vuota.
Il table-layout consente ai browser di velocizzare il layout di una tabella utilizzando le prime proprietà di larghezza che incontra per il resto di una colonna anziché dover caricare l'intera tabella prima di renderla.
Vedremo ora come utilizzare queste proprietà con esempi.
La proprietà border-collapse
Questa proprietà può avere due valori compressi e separati . L'esempio seguente utilizza entrambi i valori:
<html>
<head>
<style type = "text/css">
table.one {border-collapse:collapse;}
table.two {border-collapse:separate;}
td.a {
border-style:dotted;
border-width:3px;
border-color:#000000;
padding: 10px;
}
td.b {
border-style:solid;
border-width:3px;
border-color:#333333;
padding:10px;
}
</style>
</head>
<body>
<table class = "one">
<caption>Collapse Border Example</caption>
<tr><td class = "a"> Cell A Collapse Example</td></tr>
<tr><td class = "b"> Cell B Collapse Example</td></tr>
</table>
<br />
<table class = "two">
<caption>Separate Border Example</caption>
<tr><td class = "a"> Cell A Separate Example</td></tr>
<tr><td class = "b"> Cell B Separate Example</td></tr>
</table>
</body>
</html>Produrrà il seguente risultato:
La proprietà border-spacing
La proprietà border-spacing specifica la distanza che separa le celle adiacenti. frontiere. Può richiedere uno o due valori; queste dovrebbero essere unità di lunghezza.
Se fornisci un valore, verrà applicato sia ai bordi verticali che orizzontali. Oppure puoi specificare due valori, nel qual caso, il primo si riferisce alla spaziatura orizzontale e il secondo alla spaziatura verticale -
NOTE - Sfortunatamente, questa proprietà non funziona in Netscape 7 o IE 6.
<style type="text/css">
/* If you provide one value */
table.example {border-spacing:10px;}
/* This is how you can provide two values */
table.example {border-spacing:10px; 15px;}
</style>Ora modifichiamo l'esempio precedente e vediamo l'effetto -
<html>
<head>
<style type = "text/css">
table.one {
border-collapse:separate;
width:400px;
border-spacing:10px;
}
table.two {
border-collapse:separate;
width:400px;
border-spacing:10px 50px;
}
</style>
</head>
<body>
<table class = "one" border = "1">
<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Collapse Example</td></tr>
<tr><td> Cell B Collapse Example</td></tr>
</table>
<br />
<table class = "two" border = "1">
<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Separate Example</td></tr>
<tr><td> Cell B Separate Example</td></tr>
</table>
</body>
</html>Produrrà il seguente risultato:
La proprietà sul lato della didascalia
La proprietà caption-side consente di specificare dove posizionare il contenuto di un elemento <caption> in relazione alla tabella. La tabella che segue elenca i possibili valori.
Questa proprietà può avere uno dei quattro valori superiore, inferiore, sinistro o destro . L'esempio seguente utilizza ogni valore.
NOTE - Queste proprietà potrebbero non funzionare con il browser IE.
<html>
<head>
<style type = "text/css">
caption.top {caption-side:top}
caption.bottom {caption-side:bottom}
caption.left {caption-side:left}
caption.right {caption-side:right}
</style>
</head>
<body>
<table style = "width:400px; border:1px solid black;">
<caption class = "top">
This caption will appear at the top
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "bottom">
This caption will appear at the bottom
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "left">
This caption will appear at the left
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "right">
This caption will appear at the right
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
</body>
</html>Produrrà il seguente risultato:
Proprietà celle vuote
La proprietà celle vuote indica se una cella senza contenuto deve avere un bordo visualizzato.
Questa proprietà può avere uno dei tre valori: mostra, nascondi o eredita .
Ecco la proprietà celle vuote utilizzata per nascondere i bordi delle celle vuote nell'elemento <table>.
<html>
<head>
<style type = "text/css">
table.empty {
width:350px;
border-collapse:separate;
empty-cells:hide;
}
td.empty {
padding:5px;
border-style:solid;
border-width:1px;
border-color:#999999;
}
</style>
</head>
<body>
<table class = "empty">
<tr>
<th></th>
<th>Title one</th>
<th>Title two</th>
</tr>
<tr>
<th>Row Title</th>
<td class = "empty">value</td>
<td class = "empty">value</td>
</tr>
<tr>
<th>Row Title</th>
<td class = "empty">value</td>
<td class = "empty"></td>
</tr>
</table>
</body>
</html>Produrrà il seguente risultato:
La proprietà table-layout
La proprietà table-layout dovrebbe aiutarti a controllare come un browser deve eseguire il rendering o il layout di una tabella.
Questa proprietà può avere uno dei tre valori: fixed, auto o inherit .
L'esempio seguente mostra la differenza tra queste proprietà.
NOTE - Questa proprietà non è supportata da molti browser, quindi non fare affidamento su questa proprietà.
<html>
<head>
<style type = "text/css">
table.auto {
table-layout: auto
}
table.fixed {
table-layout: fixed
}
</style>
</head>
<body>
<table class = "auto" border = "1" width = "100%">
<tr>
<td width = "20%">1000000000000000000000000000</td>
<td width = "40%">10000000</td>
<td width = "40%">100</td>
</tr>
</table>
<br />
<table class = "fixed" border = "1" width = "100%">
<tr>
<td width = "20%">1000000000000000000000000000</td>
<td width = "40%">10000000</td>
<td width = "40%">100</td>
</tr>
</table>
</body>
</html>Produrrà il seguente risultato: