path: root/files/ca/conflicting/learn/css/building_blocks/styling_tables/index.html

---
title: Taules
slug: conflicting/Learn/CSS/Building_blocks/Styling_tables
tags:
  - CSS
  - CSS Tables
  - CSS:Getting_Started
  - Example
  - Guide
  - Intermediate
  - NeedsBeginnerUpdate
  - NeedsLiveSample
  - NeedsUpdate
  - Web
translation_of: Learn/CSS/Building_blocks/Styling_tables
translation_of_original: Web/Guide/CSS/Getting_started/Tables
original_slug: Web/Guide/CSS/Inici_en_CSS/Taules
---
<p>{{CSSTutorialTOC}}{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Layout", "Disseny")}}</p>

<p>Aquesta és la 13th secció del tutorial <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> 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ò.</p>

<h2 class="clearLeft" id="Informació_Taules">Informació: Taules</h2>

<p>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.</p>

<p>En dissenyar el vostre document, utilitzeu una taula per expressar les <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors#relselectors" title="en-US/docs/Web/Guide/CSS/Getting_Started/Selectors#relselectors">relacions</a> 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.</p>

<p>No utilitzeu taules en formes inusuals per produir determinats dissenys visuals. Les tècniques de la pàgina anterior d'aquest tutorial (<strong><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Layout" title="en-US/docs/Web/Guide/CSS/Getting_Started/Layout">Disseny</a></strong>) són millors per a aquest propòsit.</p>

<h3 id="Estructura_de_la_taula">E<span id="result_box" lang="ca"><span>structura de la taula</span></span></h3>

<p>En una taula, cada peça d'informació es mostra en una <em>cel·la</em>.</p>

<p>Les cel·les en una línia de la pàgina constitueix una <em>fila</em>.</p>

<p>En algunes taules, les files poden ser agrupades. Un grup especial de files en l'inici de la taula és la <em>capçalera (header)</em>. Un grup especial de files al final de la taula és el <em>peu de pàgina (footer)</em>. Les principals files de la taula són el <em>cos (body)</em>, i que també podrien estar en grups.</p>

<p>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.</p>

<div class="tuto_example">
<div class="tuto_type">Exemple</div>

<p>La taula de <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors#relselectors" title="en-US/docs/Web/Guide/CSS/Getting_Started/Selectors#relselectors">Selectors basats en relacion</a> en la pàgina <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors" title="en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">Selectors</a> té deu cel·les en cinc files.</p>

<p>La primera fila és la capçalera. Les altres quatre files són el cos. No hi ha peu de pàgina.</p>

<p>Té dues columnes.</p>
</div>

<p>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.</p>

<h3 id="Vores">Vores</h3>

<p>Les cel·les no tenen marges.</p>

<p>Les cel·les tenen vores i farciment. Per defecte, les vores estan separades pel valor de la propietat {{cssxref("border-spacing")}} de la taula. També podeu eliminar completament l'espai mitjançant l'establiment de la propietat {{cssxref ("border-collapse")}} de la taula a <code>col·lapsar (collapse)</code>.</p>

<div class="tuto_example">
<div class="tuto_type">Exemple</div>

<p>Aquí hi ha tres taules.</p>

<p>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:</p>

<pre class="hidden brush: html">&lt;table style="background-color:white; border:2px outset #36b; padding:1em"&gt;
 &lt;tbody&gt;
  &lt;tr&gt;
   &lt;td style="padding-right:2em;"&gt;
    &lt;table style="border-spacing:.5em"&gt;
     &lt;tbody&gt;
      &lt;tr&gt;
       &lt;td style="border:1px solid #c00;text-align:center;"&gt;Clubs&lt;/td&gt;
       &lt;td style="border:1px solid #c00;text-align:center;"&gt;Hearts&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
       &lt;td style="border:1px solid #c00;text-align:center;"&gt;Diamonds&lt;/td&gt;
       &lt;td style="border:1px solid #c00;text-align:center;"&gt;Spades&lt;/td&gt;
      &lt;/tr&gt;
     &lt;/tbody&gt;
    &lt;/table&gt;
   &lt;/td&gt;
   &lt;td style="padding-right:2em;"&gt;
    &lt;table style="border-spacing:0px"&gt;
     &lt;tbody&gt;
      &lt;tr&gt;
       &lt;td style="border:1px solid #c00;text-align:center;"&gt;Clubs&lt;/td&gt;
       &lt;td style="border:1px solid #c00;text-align:center;"&gt;Hearts&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
       &lt;td style="border:1px solid #c00;text-align:center;"&gt;Diamonds&lt;/td&gt;
       &lt;td style="border:1px solid #c00;text-align:center;"&gt;Spades&lt;/td&gt;
      &lt;/tr&gt;
     &lt;/tbody&gt;
    &lt;/table&gt;
   &lt;/td&gt;
   &lt;td style="padding-right:6em;"&gt;
    &lt;table style="border-collapse:collapse"&gt;
     &lt;tbody&gt;
      &lt;tr&gt;
       &lt;td style="border:1px solid #c00;text-align:center;"&gt;Clubs&lt;/td&gt;
       &lt;td style="border:1px solid #c00;text-align:center;"&gt;Hearts&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
       &lt;td style="border:1px solid #c00;text-align:center;"&gt;Diamonds&lt;/td&gt;
       &lt;td style="border:1px solid #c00;text-align:center;"&gt;Spades&lt;/td&gt;
      &lt;/tr&gt;
     &lt;/tbody&gt;
    &lt;/table&gt;
   &lt;/td&gt;
  &lt;/tr&gt;
 &lt;/tbody&gt;
&lt;/table&gt;
&lt;/div&gt;</pre>

<table style="background-color: white; border: 2px outset #3366bb; padding: 1em 6em 1em 1em;">
 <tbody>
  <tr>
  </tr>
 </tbody>
</table>

<p>{{embedLiveSample('Borders', 600)}}</p>
</div>

<h3 id="Llegendes">Llegendes</h3>

<p>Un element {{HTMLElement("caption")}} és una etiqueta que s'aplica a tota la taula. Per defecte, es mostra a la part superior de la taula.</p>

<p>Per moure'l a la part inferior, establiu la seva  propietat {{cssxref("caption-side")}} a baix. La propietat s'hereta, de manera que, alternativament, es pot establir sobre la taula o un altre element antecessor.</p>

<p>Per l'estil del text de la Llegenda, utilitzeu qualsevol de les propietats usuals de text.</p>

<div class="tuto_example">
<div class="tuto_type">Exemple</div>

<p><span class="short_text" id="result_box" lang="ca"><span>Aquesta taula</span> <span>té</span> <span>una llegenda</span> <span>a la part inferior</span></span>.</p>

<pre class="brush: css">#demo-table &gt; caption {
  caption-side: bottom;
  font-style: italic;
  text-align: right;
}
</pre>

<pre class="hidden brush: html">&lt;table style="background-color:white; border:2px outset #36b; padding:1em 6em 1em 1em"&gt;
 &lt;tbody&gt;
  &lt;tr&gt;
   &lt;td&gt;
    &lt;table&gt;
     &lt;caption style="caption-side: bottom;font-style: italic;text-align: right;"&gt;Suits&lt;/caption&gt;
     &lt;tbody&gt;
      &lt;tr&gt;
       &lt;td&gt;
        &lt;table style="border-collapse:collapse"&gt;
         &lt;tbody&gt;
          &lt;tr&gt;
           &lt;td style="border:1px solid gray;text-align:center;"&gt;Clubs&lt;/td&gt;
           &lt;td style="border:1px solid gray;text-align:center;"&gt;Hearts&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
           &lt;td style="border:1px solid gray;text-align:center;"&gt;Diamonds&lt;/td&gt;
           &lt;td style="border:1px solid gray;text-align:center;"&gt;Spades&lt;/td&gt;
          &lt;/tr&gt;
         &lt;/tbody&gt;
        &lt;/table&gt;
       &lt;/td&gt;
      &lt;/tr&gt;
     &lt;/tbody&gt;
    &lt;/table&gt;
   &lt;/td&gt;
  &lt;/tr&gt;
 &lt;/tbody&gt;
&lt;/table&gt;</pre>

<p>{{embedLiveSample('Captions', 300)}}</p>
</div>

<h3 id="Cel·les_buides"><span id="result_box" lang="ca"><span>Cel·les</span> <span>buides</span></span></h3>

<p>Es poden mostrar cel·les buides (és a dir, les seves vores i fons) especificant {{cssxref("empty-cells")}}: show; per a l'element de la taula.</p>

<p>Es poden amagar mitjançant l'especificació <code>empty-cells: hide</code>;. Llavors, si l'element pare d'una cel·la té un fons, es mostra a través de la cel.la buida.</p>

<div class="tuto_example">
<div class="tuto_type">Exemple</div>

<p>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.</p>

<p>A la taula de l'esquerra, es mostra la cel·la buida. A la dreta, està oculta:</p>

<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
 <tbody>
  <tr>
   <td style="padding-right: 2em;">
    <table style="background-color: #ddffdd;">
     <tbody>
      <tr>
       <td style="border: 1px solid #555; background-color: #eee;"> </td>
       <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td>
      </tr>
      <tr>
       <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td>
       <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td>
      </tr>
     </tbody>
    </table>
   </td>
   <td style="padding-right: 6em;">
    <table style="background-color: #ddffdd;">
     <tbody>
      <tr>
       <td> </td>
       <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td>
      </tr>
      <tr>
       <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td>
       <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td>
      </tr>
     </tbody>
    </table>
   </td>
  </tr>
 </tbody>
</table>
</div>

<div class="tuto_details">
<div class="tuto_type">Detalls</div>

<p>Per obtenir informació detallada sobre les taules, vegeu <a href="http://www.w3.org/TR/CSS21/tables.html">Taules</a> en l'especificació CSS.</p>

<p>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.</p>
</div>

<h2 id="Acció_Estil_d'una_taula"><span id="result_box" lang="ca"><span>Acció</span><span>:</span> <span>Estil</span> <span>d'una</span> <span>taula</span></span></h2>

<ol>
 <li>Feu un nou document HTML, <code>doc3.html</code>. Copieu i enganxeu el contingut d'aquí, assegurant-se que es desplaça per obtenir tota ella;

  <pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Sample document 3&lt;/title&gt;
    &lt;link rel="stylesheet" href="style3.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;table id="demo-table"&gt;
      &lt;caption&gt;Oceans&lt;/caption&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;&lt;/th&gt;
          &lt;th&gt;Area&lt;/th&gt;
          &lt;th&gt;Mean depth&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th&gt;&lt;/th&gt;
          &lt;th&gt;million km&lt;sup&gt;2&lt;/sup&gt;&lt;/th&gt;
          &lt;th&gt;m&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;th&gt;Arctic&lt;/th&gt;
          &lt;td&gt;13,000&lt;/td&gt;
          &lt;td&gt;1,200&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th&gt;Atlantic&lt;/th&gt;
          &lt;td&gt;87,000&lt;/td&gt;
          &lt;td&gt;3,900&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th&gt;Pacific&lt;/th&gt;
          &lt;td&gt;180,000&lt;/td&gt;
          &lt;td&gt;4,000&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th&gt;Indian&lt;/th&gt;
          &lt;td&gt;75,000&lt;/td&gt;
          &lt;td&gt;3,900&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th&gt;Southern&lt;/th&gt;
          &lt;td&gt;20,000&lt;/td&gt;
          &lt;td&gt;4,500&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;tfoot&gt;
        &lt;tr&gt;
          &lt;th&gt;Total&lt;/th&gt;
          &lt;td&gt;361,000&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th&gt;Mean&lt;/th&gt;
          &lt;td&gt;72,000&lt;/td&gt;
          &lt;td&gt;3,800&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tfoot&gt;
    &lt;/table&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>
 </li>
 <li>Feu un nova fulla d'estil, <code>style3.css</code>. Copieu i enganxeu el contingut d'aquí, assegurant-se que es desplaça per obtenir tota ella;
  <pre class="brush: css">/*** 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 &gt; 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 &gt; thead &gt; tr:first-child &gt; th {
  text-align: center;
  color: blue;
}

#demo-table &gt; thead &gt; tr + tr &gt; 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 &gt; tfoot td {
  background-color: #cee;
}

#demo-table &gt; tfoot &gt; tr:first-child td {
  border-top: .2em solid #7a7;
}
</pre>
 </li>
 <li>Obriu el document en el navegador. Ha de tenir un aspecte molt similar a aquest:<br>
  {{EmbedLiveSample("Action_Styling_a_table", 400, 380)}}</li>
 <li>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:
  <ul>
   <li>La llegenda es troba fora de la vora de la taula.</li>
   <li>Si teniu una mida de punt mínim establert en les Opcions, podria afectar el superíndex en km<sup>2</sup>.</li>
   <li>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.</li>
   <li>Els dos punts son afegits per la fulla d'estil.</li>
  </ul>
 </li>
</ol>

<div class="tuto_example">
<div class="tuto_type">Repte</div>

<p>Modifiqueu la fulla d'estils per fer que la taula tingui aquest aspecte:</p>

<table style="background-color: white; border: 2px outset #3366bb; padding: 1em 6em 1em 1em;">
 <tbody>
  <tr>
   <td>
    <div>
    <div style="border: 1px solid #7a7; background-color: #efe;">
    <table style="background-color: #eeffee; border-collapse: collapse; font: 100% sans-serif; padding-right: .5em; text-align: right;">
     <tbody>
      <tr style="text-align: center; color: blue;">
       <th> </th>
       <th>Area</th>
       <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th>
      </tr>
      <tr style="font-style: italic; color: gray;">
       <th> </th>
       <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th>
       <th style="padding-left: .5em; padding-right: .5em;">m</th>
      </tr>
      <tr>
       <th style="padding-right: .5em;">Arctic:</th>
       <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">13,000</td>
       <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">1,200</td>
      </tr>
      <tr>
       <th style="padding-right: .5em;">Atlantic:</th>
       <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">87,000</td>
       <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td>
      </tr>
      <tr>
       <th style="padding-right: .5em;">Pacific:</th>
       <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">180,000</td>
       <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,000</td>
      </tr>
      <tr>
       <th style="padding-right: .5em;">Indian:</th>
       <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">75,000</td>
       <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td>
      </tr>
      <tr>
       <th style="padding-left: .5em; padding-right: .5em;">Southern:</th>
       <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">20,000</td>
       <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,500</td>
      </tr>
      <tr>
       <th style="padding-right: .5em; color: blue;">Total:</th>
       <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td>
       <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td>
      </tr>
      <tr>
       <th style="padding-right: .5em; color: blue;">Mean:</th>
       <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td>
       <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td>
      </tr>
     </tbody>
    </table>
    </div>

    <p style="font: italic 100% sans-serif; text-align: right; border-top: .4em solid #4ca; margin: 1em 0px 0px 0px;">Oceans</p>
    </div>
   </td>
  </tr>
 </tbody>
</table>
</div>

<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Tables" title="en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Tables">Veure la solució per el repte.</a></p>

<h2 id="I_ara_què">I ara què?</h2>

<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Media", "Media")}}Aquesta é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 <a href="http://www.w3.org/TR/CSS21/propidx.html">Taula de propietats completa </a>en l'especificació CSS</p>

<p>En la següent pàgina <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Media">es veu de nou</a> el propòsit i l'estructura de les fulles d'estil CSS.</p>