CSS: Tabelle stylen (Standard)

edit | delete

Autor: Ralf v.d.Mark

eingetragen: Dienstag, 05. März 2024 um 15:04 Uhr (10/2024 Kalenderwoche)

geändert: Donnerstag, 22. August 2024 um 11:12 Uhr (34/2024 Kalenderwoche)

Keywords: Tabelle table tbody thead stylen

Kategorien: CSS, HTML,

Text:

CSS/HTML: Tabelle stylen (Standard oder rmsTabelle)


Sehr gute Hilfeseite: htmltable.com/div-table/

Quellcode:   

<style>
table {
    border: 1px outset blueviolet;
}
th, td {
    padding: 2px 3px 0 2px;
    border-bottom: 1px outset blueviolet;
    border-right: 1px outset blueviolet;
}
th {
    font-size: 1em;
    vertical-align: middle;
    background-color: #E6EAB2; /* gruen */
}
td {
    font-size: 0.9em;
    padding: 0.2em 0.3em 0.2em 0.3em;
    vertical-align: top;
    color: #26569E;
}




table.rmsTabelle {
  font-family: Arial, Helvetica, sans-serif;
  border: 1px solid #110CEB;
  background-color: #F7F7F7;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}
table.rmsTabelle td, table.rmsTabelle th {
  border: 1px solid #AAAAAA;
}
table.rmsTabelle tbody td {
  font-size: 13px;
  color: #333333;
}
table.rmsTabelle tr:nth-child(even) {
  background: #EDEDED;
}
table.rmsTabelle thead {
  background: #DDDDDD;
  border-bottom: 2px solid #444444;
}
table.rmsTabelle thead th {
  font-size: 16px;
  font-weight: bold;
  color: #FFFFFF;
  text-align: center;
}
table.rmsTabelle tfoot {
  font-size: 14px;
  font-weight: bold;
  background: #D0E4F5;
  background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  border-top: 2px solid #444444;
}
table.rmsTabelle tfoot td {
  font-size: 14px;
}
</style>

<table class="rmsTabelle">
  <thead>
    <tr>
      <th>head1</th>
      <th>head2</th>
      <th>head3</th>
      <th>head4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>cell1_1</td>
      <td>cell2_1</td>
      <td>cell3_1</td>
      <td>cell4_1</td>
    </tr>
    <tr>
      <td>cell1_2</td>
      <td>cell2_2</td>
      <td>cell3_2</td>
      <td>cell4_2</td>
    </tr>
    <tr>
      <td>cell1_3</td>
      <td>cell2_3</td>
      <td>cell3_3</td>
      <td>cell4_3</td>
    </tr>
    <tr>
      <td>cell1_4</td>
      <td>cell2_4</td>
      <td>cell3_4</td>
      <td>cell4_4</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>foot1</td>
      <td>foot2</td>
      <td>foot3</td>
      <td>foot4</td>
    </tr>
  </tfoot>
</table>