東京都府中市、九段下のWEB制作会社Maromaroのブログです

無難なテーブル

  • 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

その他のテーブル

th th th th
th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
スタイリッシュなテーブル
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
コミック風のテーブル
th th th th
th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
th texttexttexttext texttexttexttext texttexttexttext texttexttexttext
マテリアルなテーブル
テーブルの一覧をもっと見る

要素一覧