This translation is incomplete. Please help translate this article from English.
Disseny
Aquesta és la 13th secció del tutorial CSS Getting Started tutorial; descriu selectors més avançats, i algunes formes específiques en el disseny de taules. Es crea un nou document d'exemple que conté una taula, i un full d'estil per a això.
Informació: Taules
Una taula és una disposició de la informació en una reixeta rectangular. Algunes taules poden ser complexes, i per a taules complexes, diferents navegadors poden donar resultats diferents.
En dissenyar el vostre document, utilitzeu una taula per expressar les relacions entre els elements d'informació. Llavors no importa si els diferents navegadors presenten la informació de manera lleugerament diferent, ja que el significat segueix sent clar.
No utilitzeu taules en formes inusuals per produir determinats dissenys visuals. Les tècniques de la pàgina anterior d'aquest tutorial (Disseny) són millors per a aquest propòsit.
Estructura de la taula
En una taula, cada peça d'informació es mostra en una cel·la.
Les cel·les en una línia de la pàgina constitueix una fila.
En algunes taules, les files poden ser agrupades. Un grup especial de files en l'inici de la taula és la capçalera (header). Un grup especial de files al final de la taula és el peu de pàgina (footer). Les principals files de la taula són el cos (body), i que també podrien estar en grups.
Les cel·les en una línia de la pàgina conformen una columna, però les columnes tenen un ús limitat en la CSS de les taules.
La taula de Selectors basats en relacion en la pàgina Selectors té deu cel·les en cinc files.
La primera fila és la capçalera. Les altres quatre files són el cos. No hi ha peu de pàgina.
Té dues columnes.
Aquest tutorial només cobreix taules simples, on els resultats són bastant predictibles. En una taula simple, cada cel·la ocupa només una fila i columna. Es pot utilitzar CSS per a taules complexes en les cel·les que s'estenen (s'estenen a través) més d'una fila o columna, però les taules com aquestes estan més enllà de l'abast d'aquest tutorial bàsic.
Vores
Les cel·les no tenen marges.
Les cel·les tenen vores i farciment. Per defecte, les vores estan separades pel valor de la propietat border-spacing de la taula. També podeu eliminar completament l'espai mitjançant l'establiment de la propietat border-collapse de la taula a col·lapsar (collapse).
Aquí hi ha tres taules.
La taula de l'esquerra té 0,5 em espaiat de vores. La taula del centre té espaiat de vores zero. La taula de la dreta ha col·lapsat les vores:
<table style="background-color:white; border:2px outset #36b; padding:1em"> <tbody> <tr> <td style="padding-right:2em;"> <table style="border-spacing:.5em"> <tbody> <tr> <td style="border:1px solid #c00;text-align:center;">Clubs</td> <td style="border:1px solid #c00;text-align:center;">Hearts</td> </tr> <tr> <td style="border:1px solid #c00;text-align:center;">Diamonds</td> <td style="border:1px solid #c00;text-align:center;">Spades</td> </tr> </tbody> </table> </td> <td style="padding-right:2em;"> <table style="border-spacing:0px"> <tbody> <tr> <td style="border:1px solid #c00;text-align:center;">Clubs</td> <td style="border:1px solid #c00;text-align:center;">Hearts</td> </tr> <tr> <td style="border:1px solid #c00;text-align:center;">Diamonds</td> <td style="border:1px solid #c00;text-align:center;">Spades</td> </tr> </tbody> </table> </td> <td style="padding-right:6em;"> <table style="border-collapse:collapse"> <tbody> <tr> <td style="border:1px solid #c00;text-align:center;">Clubs</td> <td style="border:1px solid #c00;text-align:center;">Hearts</td> </tr> <tr> <td style="border:1px solid #c00;text-align:center;">Diamonds</td> <td style="border:1px solid #c00;text-align:center;">Spades</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div>
Llegendes
Un element <caption> és una etiqueta que s'aplica a tota la taula. Per defecte, es mostra a la part superior de la taula.
Per moure'l a la part inferior, establiu la seva propietat caption-side a baix. La propietat s'hereta, de manera que, alternativament, es pot establir sobre la taula o un altre element antecessor.
Per l'estil del text de la Llegenda, utilitzeu qualsevol de les propietats usuals de text.
Aquesta taula té una llegenda a la part inferior.
#demo-table > caption {
caption-side: bottom;
font-style: italic;
text-align: right;
}
<table style="background-color:white; border:2px outset #36b; padding:1em 6em 1em 1em">
<tbody>
<tr>
<td>
<table>
<caption style="caption-side: bottom;font-style: italic;text-align: right;">Suits</caption>
<tbody>
<tr>
<td>
<table style="border-collapse:collapse">
<tbody>
<tr>
<td style="border:1px solid gray;text-align:center;">Clubs</td>
<td style="border:1px solid gray;text-align:center;">Hearts</td>
</tr>
<tr>
<td style="border:1px solid gray;text-align:center;">Diamonds</td>
<td style="border:1px solid gray;text-align:center;">Spades</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Cel·les buides
Es poden mostrar cel·les buides (és a dir, les seves vores i fons) especificant empty-cells: show; per a l'element de la taula.
Es poden amagar mitjançant l'especificació empty-cells: hide;. Llavors, si l'element pare d'una cel·la té un fons, es mostra a través de la cel.la buida.
Aquestes taules tenen un fons de color verd pàl·lid. Les seves cel·les tenen un fons gris clar i unes vores gris fosc.
A la taula de l'esquerra, es mostra la cel·la buida. A la dreta, està oculta:
|
|
Per obtenir informació detallada sobre les taules, vegeu Taules en l'especificació CSS.
La informació no va més enllà d'aquest tutorial, però no cobreix les diferències entre els navegadors que poden afectar a taules complexes.
Acció: Estil d'una taula
- Feu un nou document HTML,
doc3.html. Copieu i enganxeu el contingut d'aquí, assegurant-se que es desplaça per obtenir tota ella;<!DOCTYPE html> <html> <head> <title>Sample document 3</title> <link rel="stylesheet" href="style3.css"> </head> <body> <table id="demo-table"> <caption>Oceans</caption> <thead> <tr> <th></th> <th>Area</th> <th>Mean depth</th> </tr> <tr> <th></th> <th>million km<sup>2</sup></th> <th>m</th> </tr> </thead> <tbody> <tr> <th>Arctic</th> <td>13,000</td> <td>1,200</td> </tr> <tr> <th>Atlantic</th> <td>87,000</td> <td>3,900</td> </tr> <tr> <th>Pacific</th> <td>180,000</td> <td>4,000</td> </tr> <tr> <th>Indian</th> <td>75,000</td> <td>3,900</td> </tr> <tr> <th>Southern</th> <td>20,000</td> <td>4,500</td> </tr> </tbody> <tfoot> <tr> <th>Total</th> <td>361,000</td> <td></td> </tr> <tr> <th>Mean</th> <td>72,000</td> <td>3,800</td> </tr> </tfoot> </table> </body> </html> - Feu un nova fulla d'estil,
style3.css. Copieu i enganxeu el contingut d'aquí, assegurant-se que es desplaça per obtenir tota ella;/*** Style for doc3.html (Tables) ***/ #demo-table { font: 100% sans-serif; background-color: #efe; border-collapse: collapse; empty-cells: show; border: 1px solid #7a7; } #demo-table > caption { text-align: left; font-weight: bold; font-size: 200%; border-bottom: .2em solid #4ca; margin-bottom: .5em; } /* basic shared rules */ #demo-table th, #demo-table td { text-align: right; padding-right: .5em; } #demo-table th { font-weight: bold; padding-left: .5em; } /* header */ #demo-table > thead > tr:first-child > th { text-align: center; color: blue; } #demo-table > thead > tr + tr > th { font-style: italic; color: gray; } /* fix size of superscript */ #demo-table sup { font-size: 75%; } /* body */ #demo-table td { background-color: #cef; padding:.5em .5em .5em 3em; } #demo-table tbody th:after { content: ":"; } /* footer */ #demo-table tfoot { font-weight: bold; } #demo-table tfoot th { color: blue; } #demo-table tfoot th:after { content: ":"; } #demo-table > tfoot td { background-color: #cee; } #demo-table > tfoot > tr:first-child td { border-top: .2em solid #7a7; } - Obriu el document en el navegador. Ha de tenir un aspecte molt similar a aquest:
- Compareu les regles de la fulla d'estil amb la taula que es mostra, per assegurar-se que compreneu l'efecte de cada regla. Si trobeu una regla que no esteu segur sobre ella, comentar-la i refresqueu el navegador per veure què passa. Aquí hi ha algunes notes sobre aquesta taula:
- La llegenda es troba fora de la vora de la taula.
- Si teniu una mida de punt mínim establert en les Opcions, podria afectar el superíndex en km2.
- Hi ha tres cel·les buides. Dos d'elles permeten mostrar el fons de la taula a través. El tercer té un fons i una vora superior.
- Els dos punts son afegits per la fulla d'estil.
Modifiqueu la fulla d'estils per fer que la taula tingui aquest aspecte:
Oceans |
Veure la solució per el repte.
I ara què?
Go to Next Section:
MediaAquesta és l'última pàgina d'aquest tutorial que se centra en les propietats i els valors CSS. Per a un resum complet de les propietats i valors, vegeu Taula de propietats completa en l'especificació CSS
En la següent pàgina es veu de nou el propòsit i l'estructura de les fulles d'estil CSS.