東京都府中市のWeb制作会社が運営するブログです。

テーブル

テーブルのデザインテンプレート一覧です。

スタイリッシュなテーブル

  • RESULT
  • HTML
  • CSS
  • th th th th
    th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
    th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
    th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
    th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
  • コピー
    <table class="msr_table05">
      <thead>
        <tr>
          <th></th>
          <th>th</th>
          <th>th</th>
          <th>th</th>
          <th>th</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>th</th>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
        </tr>
        <tr>
          <th>th</th>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
        </tr>
        <tr>
          <th>th</th>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
        </tr>
        <tr>
          <th>th</th>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
        </tr>
      </tbody>
    </table>
  • コピー
    .msr_table05 {
      border:1px solid #999999;
      border-collapse: collapse;
      color:#333333;
      line-height: 1.6;
      text-align: left;
      width: 100%;
    }
    .msr_table05 th {
      border:1px solid #999999;
      font-size: 14px;
      font-weight: normal;
      padding: 12px 16px;
      text-align: center;
      vertical-align : middle;
    }
    .msr_table05 thead th{
      position:relative;
    }
    .msr_table05 thead th:after{
      content: "";
      display: block;
      left: 0;
      position: absolute;
      bottom: 2px;
      width: 100%;
      border-bottom: 1px solid #999999;
    }
    .msr_table05 td {
      border:1px solid #999999;
      font-size: 14px;
      padding: 12px 16px;
      vertical-align: top;
    }

検証済みブラウザ

  • Edge
  • FF
  • chrome
  • Safari

コミック風のテーブル

  • RESULT
  • HTML
  • CSS
  • th th th th th
    th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
    th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
    th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
    th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
  • コピー
    <table class="msr_table04">
      <thead>
        <tr>
          <th>th</th>
          <th>th</th>
          <th>th</th>
          <th>th</th>
          <th>th</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>th</th>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
        </tr>
        <tr>
          <th>th</th>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
        </tr>
        <tr>
          <th>th</th>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
        </tr>
        <tr>
          <th>th</th>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
        </tr>
      </tbody>
    </table>
  • コピー
    .msr_table04 {
      border-collapse: collapse;
      border-bottom: 5px solid #000000;
      border-right: 5px solid #000000;
      border-left: 5px solid #000000;
      line-height: 1.5;
      text-align: left;
      width: 100%;
    }
    .msr_table04 thead th {
      background-color: #000000;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      border-top: 5px solid #fff;
      border-right: 5px solid #fff;
      color: #FFFFFF;
      font-size: 14px;
      font-weight: normal;
      padding: 10px 30px;
      text-align: center;
      vertical-align : middle;
    }
    .msr_table04 thead th:last-child{
      border-right:none;
    }
    .msr_table04 thead th:first-child{
      border-left:none;
    }
    .msr_table04 thead tr:first-child th {
      border-bottom:none;
    }
    .msr_table04 tbody th {
      background-color: #FFFFFF;
      border-bottom: 5px solid #000000;
      border-right: 5px solid #000000;
      border-left: 5px solid #000000;
      box-sizing: border-box;
      font-size: 14px;
      font-weight:bold;
      padding: 15px;
      text-align: center;
      vertical-align : middle;
    }
    .msr_table04 td {
      background-color: #FFFFFF;
      border-bottom: 5px solid #000000;
      border-right: 5px solid #000000;
      box-sizing: border-box;
      font-size: 14px;
      padding: 15px;
      vertical-align: top;
    }
    .msr_table04 td:first-child {
      border-left: 5px solid #000000;
    }

検証済みブラウザ

  • Edge
  • FF
  • chrome

マテリアルなテーブル

  • RESULT
  • HTML
  • CSS
  • th th th th
    th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
    th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
    th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
    th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
  • コピー
    <table class="msr_table03">
      <thead>
        <tr>
          <th></th>
          <th>th</th>
          <th>th</th>
          <th>th</th>
          <th>th</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>th</th>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
        </tr>
        <tr>
          <th>th</th>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
        </tr>
        <tr>
          <th>th</th>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
        </tr>
        <tr>
          <th>th</th>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
        </tr>
      </tbody>
    </table>
  • コピー
    .msr_table03 {
      box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
      -moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
      -webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
      border-collapse: collapse;
      line-height: 1.5;
      text-align: left;
      width: 100%;
    }
    .msr_table03 th {
      background-color: #1B73BA;
      box-sizing: border-box;
      color: #FFFFFF;
      font-size: 14px;
      font-weight: normal;
      padding: 10px;
      text-align: center;
      vertical-align : middle;
    }
    .msr_table03 thead {
      box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
      -moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
      -webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
    }
    
    /* th偶数番号の設定 */
    .msr_table03 thead th:nth-child(odd) {
      background-color: #17619C;
      border-right: 1px solid #17619C;
    }
    .msr_table03 td {
      background-color: #F8F8F8;
      border-right: 1px solid #8DA6AF;
      border-top: 1px solid #8DA6AF;
      font-size: 14px;
      padding: 10px;
      vertical-align: top;
    }
    .msr_table03 td:last-child {
      border-right: none;
    }
    .msr_table03 tbody tr:first-child td {
      border-top: none;
    }
    
    /* tr奇数番号のth設定 */
    .msr_table03 tr:nth-child(even) th {
      background-color: #17619C;
      border-bottom: 1px solid #17619C;
      box-shadow: 2px 0 2px rgba(0,0,0,0.2);
      -moz-box-shadow: 2px 0 2px rgba(0,0,0,0.2);
      -webkit-box-shadow: 2px 0 2px rgba(0,0,0,0.2);
    }

検証済みブラウザ

  • FF
  • chrome
  • Safari

フラットなテーブル

  • RESULT
  • HTML
  • CSS
  • th th th th
    th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
    th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
    th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
    th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
  • コピー
    <table class="msr_table02">
      <thead>
        <tr>
          <th></th>
          <th>th</th>
          <th>th</th>
          <th>th</th>
          <th>th</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>th</th>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
        </tr>
        <tr>
          <th>th</th>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
        </tr>
        <tr>
          <th>th</th>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
        </tr>
        <tr>
          <th>th</th>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
        </tr>
      </tbody>
    </table>
  • コピー
    .msr_table02 {
      border-collapse: collapse;
      border-bottom: 1px solid #E6E6E6;
      border-right: 1px solid #E6E6E6;
      line-height: 1.5;
      text-align: left;
      width: 100%;
    }
    .msr_table02 th {
      background-color: #1B73BA;
      box-sizing: border-box;
      color: #FFFFFF;
      font-size: 14px;
      font-weight: normal;
      padding: 10px;
      text-align: center;
      vertical-align : middle;
    }
    
    /* th偶数番号の設定 */
    .msr_table02 thead th:nth-child(odd) {
      background-color: #17619C;
    }
    .msr_table02 td {
      background-color: #E6E6E6;
      font-size: 13px;
      padding: 10px;
      vertical-align: top;
    }
    
    /* tr奇数番号のth設定 */
    .msr_table02 tr:nth-child(even) th {
      background-color: #17619C;
    }
    
    /* tr奇数番号のtd奇数番号設定 */
    .msr_table02 tr:nth-child(even) td:nth-child(even) {
      background-color: #F3F3F3;
    }
    
    /* tr偶数番号のtd偶数番号設定 */
    .msr_table02 tr:nth-child(odd) td:nth-child(odd) {
      background-color: #F3F3F3;
    }

検証済みブラウザ

  • IE9
  • IE10
  • Edge
  • FF
  • chrome
  • Safari

無難なテーブル

  • RESULT
  • HTML
  • CSS
  • th th th th
    th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
    th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
    th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
    th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
  • コピー
    <table class="msr_table01">
      <thead>
        <tr>
          <th></th>
          <th>th</th>
          <th>th</th>
          <th>th</th>
          <th>th</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>th</th>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
        </tr>
        <tr>
          <th>th</th>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
        </tr>
        <tr>
          <th>th</th>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
        </tr>
        <tr>
          <th>th</th>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
          <td>texttexttexttext</td>
        </tr>
      </tbody>
    </table>
  • コピー
    .msr_table01 {
      border-collapse: collapse;
      border-left: 1px solid #AAAAAA;
      border-top: 1px solid #AAAAAA;
      line-height: 1.5;
      text-align: left;
      width: 100%;
    }
    .msr_table01 th {
      background-color: #E3E7E9;
      border-bottom: 1px solid #AAAAAA;
      border-right: 1px solid #AAAAAA;
      box-sizing: border-box;
      font-size: 14px;
      font-weight: normal;
      padding: 10px;
      text-align: center;
      vertical-align : middle;
    }
    .msr_table01 thead th {
      background-color: #ABB7BC;
      border-right: 1px solid #FFFFFF;
      color: #FFFFFF;
    }
    .msr_table01 thead th:last-child {
      border-right: 1px solid #AAAAAA;
    }
    .msr_table01 td {
      border-bottom: 1px solid #AAAAAA;
      border-right: 1px solid #AAAAAA;
      font-size: 13px;
      padding: 10px;
      vertical-align: top;
    }

検証済みブラウザ

  • IE8
  • IE9
  • IE10
  • Edge
  • FF
  • chrome
  • Safari
  • このエントリーをはてなブックマークに追加