コピペでできるテーブルのデザインサンプル一覧[HTML/CSS]

<table class="t8-table-1">
  <tbody>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
  </tbody>
</table>

<table class="t8-table-2">
  <tbody>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
  </tbody>
</table>

<table class="t8-table-3">
  <tbody>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  </tbody>
</table>

<table class="t8-table-4">
  <tbody>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  </tbody>
</table>

<table>
  <tbody class="t8-table-4a">
    <tr><td></td><td rowspan="4"></td><td></td><td rowspan="4"></td></tr>
    <tr><td></td><td></td></tr><tr><td></td><td></td></tr><tr><td></td><td></td></tr>
  </tbody>
</table>

<table class="t8-table-5">
  <tbody>
    <thead><tr><th></th><th></th><th></th><th></th></tr></thead>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
  </tbody>
</table>

.t8-table-5 thead th {   
    background-color: #0d6efd !important; 
}

<table class="t8-table-6">
  <tbody>
    <thead><tr><th></th><th></th><th></th><th></th></tr></thead>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tfoot><tr><td></td><td></td><td></td><td></td></tr></tfoot>
  </tbody>
</table>

.t8-table-6 thead th {   
    background-color: #0d6efd !important; 
}

.t8-table-6 tfoot {   
    background-color: blue !important; 
}

<table class="t8-table-7">
  <tbody>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
  </tbody>
</table>

.t8-table-7 td:nth-child(1) {
    background-color:#0d6efd;
}

<table class="t8-table-8">
  <tbody>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
  </tbody>
</table>

.t8-table-8 td:nth-child(odd) {
    background-color:#0d6efd;
}

<table class="t8-table-9">
  <tbody>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
  </tbody>
</table>

.t8-table-9 tr:nth-child(even){
    background-color:#0d6efd;
}

<table class="t8-table-10">
  <tbody>
    <tr><td></td><td></td><td></td><td></td></tr>
  </tbody>
</table>

.t8-table-10{   
    border: 1px solid #808080;
}

.t8-table-10 td{   
    height: 100px;
}

.t8-table-10 th{   
    border-left: 1px solid #808080;
}

<table class="t8-table-11">
  <tbody>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
  </tbody>
</table>

.t8-table-11{   
    border: 1px solid #808080 !important;
}

.t8-table-11 td{   
    border: none;
}

.t8-table-11 tr{   
    border-bottom: 1px solid #808080;
}

<figure class="t8-ftable-12">
  <table class="t8-table-12">
    <tbody>
      <tr><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td><td></td></tr>
    </tbody>
  </table>
</figure>

.t8-table-12 {   
    border: 1px solid #808080;
    border-collapse: separate !important;
    border-spacing: 5px !important;
}

.t8-table-12 td {   
    border-radius:5px;
}

<figure class="t8-ftable-12a">
  <table class="t8-table-12a">
    <tbody>
      <tr><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td><td></td></tr>
    </tbody>
  </table>
</figure>

.t8-ftable-12a {   
    border: 1px solid #808080;
}

.t8-table-12a {   
    border: 1px solid #808080;
    border-collapse: separate !important;
    border-spacing: 3px !important;
}