Tabelas

Conteúdo Tabular
Linguagem Utilização
Python    14.51%
C         14.41%
Java      13.23%
C++       12.96%
C#        8.21
Conteúdo Tabular
Linguagem Utilização
Python    14.51%
C         14.41%
Java      13.23%
C++       12.96%
C#        8.21

Estrutura

table-html
/codes/css/table/table-html/index.html
<h1>Table</h1>
<table>
  <thead>
    <tr>
      <th>Linguagem</th>
      <th>Utilização</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Python</td>
      <td>14.51%</td>
    </tr>
    <tr>
      <td>C</td>
      <td>14.41%</td>
    </tr>
    <tr>
      <td>Java</td>
      <td>13.23%</td>
    </tr>
    <tr>
      <td>C++</td>
      <td>12.96%</td>
    </tr>
    <tr>
      <td>C#</td>
      <td>8.21%</td>
    </tr>
  </tbody>
</table>
/codes/css/table/table-html/index.html
<h1>Table</h1>
<table>
  <thead>
    <tr>
      <th>Linguagem</th>
      <th>Utilização</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Python</td>
      <td>14.51%</td>
    </tr>
    <tr>
      <td>C</td>
      <td>14.41%</td>
    </tr>
    <tr>
      <td>Java</td>
      <td>13.23%</td>
    </tr>
    <tr>
      <td>C++</td>
      <td>12.96%</td>
    </tr>
    <tr>
      <td>C#</td>
      <td>8.21%</td>
    </tr>
  </tbody>
</table>

Estilo

table-css
/codes/css/table/table-css/index.html
<main>
  <h1>Table Striped</h1>
 
  <table class="table-head-dark table-border table-striped">
    <thead>
      <tr>
        <th>Linguagem</th>
        <th>Utilização</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Python</td>
        <td>14.51%</td>
      </tr>
      <tr>
        <td>C</td>
        <td>14.41%</td>
      </tr>
      <tr>
        <td>Java</td>
        <td>13.23%</td>
      </tr>
      <tr>
        <td>C++</td>
        <td>12.96%</td>
      </tr>
      <tr>
        <td>C#</td>
        <td>8.21%</td>
      </tr>
    </tbody>
  </table>
 
  <h1>Table Hover</h1>
 
  <table class="table-head-dark table-border-b table-hover">
    <thead>
      <tr>
        <th>Linguagem</th>
        <th>Utilização</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Python</td>
        <td>14.51%</td>
      </tr>
      <tr>
        <td>C</td>
        <td>14.41%</td>
      </tr>
      <tr>
        <td>Java</td>
        <td>13.23%</td>
      </tr>
      <tr>
        <td>C++</td>
        <td>12.96%</td>
      </tr>
      <tr>
        <td>C#</td>
        <td>8.21%</td>
      </tr>
    </tbody>
  </table>
</main>
/codes/css/table/table-css/index.html
<main>
  <h1>Table Striped</h1>
 
  <table class="table-head-dark table-border table-striped">
    <thead>
      <tr>
        <th>Linguagem</th>
        <th>Utilização</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Python</td>
        <td>14.51%</td>
      </tr>
      <tr>
        <td>C</td>
        <td>14.41%</td>
      </tr>
      <tr>
        <td>Java</td>
        <td>13.23%</td>
      </tr>
      <tr>
        <td>C++</td>
        <td>12.96%</td>
      </tr>
      <tr>
        <td>C#</td>
        <td>8.21%</td>
      </tr>
    </tbody>
  </table>
 
  <h1>Table Hover</h1>
 
  <table class="table-head-dark table-border-b table-hover">
    <thead>
      <tr>
        <th>Linguagem</th>
        <th>Utilização</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Python</td>
        <td>14.51%</td>
      </tr>
      <tr>
        <td>C</td>
        <td>14.41%</td>
      </tr>
      <tr>
        <td>Java</td>
        <td>13.23%</td>
      </tr>
      <tr>
        <td>C++</td>
        <td>12.96%</td>
      </tr>
      <tr>
        <td>C#</td>
        <td>8.21%</td>
      </tr>
    </tbody>
  </table>
</main>
/codes/css/table/table-css/css/style.css
main {
  width: 768px;
  margin: auto;
}
 
html {
  font-family: Arial, Helvetica, sans-serif;
}
 
table,
th,
td {
  padding: 0.2rem 0.5rem;
}
 
.table-border,
.table-border :is(th, td) {
  border: 1px solid #000;
}
 
.table-striped tr:nth-child(2n) {
  background-color: #e2e8f0;
}
 
html.dark .table-striped tr:nth-child(2n) {
  background-color: #1e293b;
}
 
.table-border-b tr {
  border-bottom: 1px solid #000;
}
 
html.dark .table-border-b tr {
  border-bottom-color: #fff;
}
 
.table-head-dark th {
  background-color: #334155;
  color: #e2e8f0;
  text-align: left;
}
 
table {
  min-width: 300px;
  border-collapse: collapse;
}
 
.table-hover tr:hover {
  background-color: #e2e8f0;
}
/codes/css/table/table-css/css/style.css
main {
  width: 768px;
  margin: auto;
}
 
html {
  font-family: Arial, Helvetica, sans-serif;
}
 
table,
th,
td {
  padding: 0.2rem 0.5rem;
}
 
.table-border,
.table-border :is(th, td) {
  border: 1px solid #000;
}
 
.table-striped tr:nth-child(2n) {
  background-color: #e2e8f0;
}
 
html.dark .table-striped tr:nth-child(2n) {
  background-color: #1e293b;
}
 
.table-border-b tr {
  border-bottom: 1px solid #000;
}
 
html.dark .table-border-b tr {
  border-bottom-color: #fff;
}
 
.table-head-dark th {
  background-color: #334155;
  color: #e2e8f0;
  text-align: left;
}
 
table {
  min-width: 300px;
  border-collapse: collapse;
}
 
.table-hover tr:hover {
  background-color: #e2e8f0;
}

Referências

Editar esta página