6. Formatare tabel HTML cu CSS

Redarea conținutului tabelar pe baza unor proprietăți CSS.

HTML

<table>
<caption>Persoane importante ale Web-ului</caption>
<thead><tr><th>Identitate</th><th>Magie</th></tr></thead>
<tbody>
  <tr><td id="tbl">Tim Berners-Lee</td><td>inventator al Web-ului (inclusiv HTML, URI, HTTP)</td></tr>
  <tr><td>Roy Fielding</td><td>autor HTTP, REST; co-fondator al proiectului Apache HTTP Server</td></tr>
  <tr><td>Dan Connolly</td><td>unul dintre creatorii limbajului HTML</td></tr>
  <tr><td>Bert Bos</td><td>co-inventator al CSS</td></tr>
  <tr><td>Dave Raggett</td><td></td></tr>
</tbody>
</table>

CSS

table {
  width: 30em;
  margin: 0 auto;
  border: thin solid darkgray;
  font-family: Garamond, Verdana, serif;
}
caption {
  font-size: smaller;
  font-weight: bold;
}
td, th {
  margin: 0;
  padding: 0.3em;
} 
th {
  font-size: +120%;
  border-bottom: 0.1em dashed silver; 
}
td#tbl::before {     /* plasăm un șir de caractere ca prefix */
  content: "Sir ";
}
tr:nth-child(even) { /* rândurile pare vor fi redate diferit */ 
  background: linear-gradient(to top, darkgray, red);
}
tr td:first-child {  /* prima celulă a fiecărui rând... */
  text-align: center;
  width: 33%;
  font-variant: small-caps;
  color: rgb(0, 127, 30);
}
tr td:last-child {   /* ultima celulă a fiecărui rând... */
  font-style: italic;
  width: auto;
}
tr td:last-child::first-letter {
  text-transform: uppercase;
}
td:empty::after { /* o celulă vidă are conținut predefinit */
  content: "detalii la https://www.w3.org/People/";
}
thead th:last-child::before {
  content: open-quote;
}
thead th:last-child::after {
  content: close-quote;
}