html.1 テーブルについて理解する。

2019-09-02(Mon) | tags: table

普段 markdown で文章を書いているのですが、その場合、（おそらく）テーブル内の特定の位置だけ複数列用いてセルを作る、といったことができません。

しかし、html のタグを用いて <table> 要素を作れば、問題なくそのようなテーブルを作ることができたので、ここではその方法を記載します。

TL;DR

<td> 要素内に

  • rowspan="N" とかけばN行1列のセル
  • colspan="M" とかけば1行M列のセル
  • rowspan="N" colspan="M" とかけばN行M列のセル

サンプル

1 2 3 4
5 6
7 8 

<table>
  <tr>
    <td rowspan="3" bgcolor="red">1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td colspan="2" bgcolor="blue">5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td colspan="2" bgcolor="green">8</td>
  </tr>
</table>

今後

Timetableのページですが、セルの幅を一定にすることは可能なのですが、文字の量が多すぎるとセルの高さが大きくなってしまい、美しくありません…。（上の各セルに文字を入力するとサイズが変わることが確認できます。）とはいえ、両方固定して科目名が全てはいらないのも美しくありません。

そこで、各セルごとにフォントサイズ・文字の量を JavaScript で取得し、セルのサイズを変える必要がなくなるまでフォントサイズを小さくする、といったことをしてこの問題を解決したいと考えています。（時間のある時にやります。）

おまけ

自由に使ってください笑

1 1 1 1 1 1 1 1 1 1 1 1
1 1 1
1 1 1 1 1 1
1 1 1 1 1 1 1 1
1 1 1 1 1 1 1
1 1 1 1 1
1 1 1
1 1 1 1 1
1 1 1 1 1 1 1
1 1 1
1 1 1 1 1 1 1 1 1
1 1 1
1 1 1
1 1 1 1 1
1 1 1 1 1
1 1 1 
<table width="240px" height="320px">
  <thead>
        <tr>
      <th class="M__white">1</th>
      <th class="M__white">1</th>
      <th class="M__white">1</th>
      <th class="M__red">1</th>
      <th class="M__red">1</th>
      <th class="M__red">1</th>
      <th class="M__red">1</th>
      <th class="M__red">1</th>
      <th class="M__white">1</th>
      <th class="M__white">1</th>
      <th class="M__white">1</th>
      <th class="M__white">1</th>
        </tr>
    </thead>
  <tbody>
    <tr>
      <td colspan="2" class="M__white">1</td>
      <td colspan="9" class="M__red">1</td>
      <td colspan="1" class="M__white">1</td>
    </tr>
    <tr>
      <td colspan="2" class="M__white">1</td>
      <td colspan="3" class="M__black">1</td>
      <td colspan="2" class="M__body">1</td>
      <td colspan="1" class="M__black">1</td>
      <td colspan="1" class="M__body">1</td>
      <td colspan="3" class="M__white">1</td>
    </tr>
    <tr>
      <td colspan="1" class="M__white">1</td>
      <td colspan="1" class="M__black">1</td>
      <td colspan="1" class="M__body">1</td>
      <td colspan="1" class="M__black">1</td>
      <td colspan="3" class="M__body">1</td>
      <td colspan="1" class="M__black">1</td>
      <td colspan="3" class="M__body">1</td>
      <td colspan="1" class="M__white">1</td>
    </tr>
    <tr>
      <td colspan="1" class="M__white">1</td>
      <td colspan="1" class="M__black">1</td>
      <td colspan="1" class="M__body">1</td>
      <td colspan="2" class="M__black">1</td>
      <td colspan="3" class="M__body">1</td>
      <td colspan="1" class="M__black">1</td>
      <td colspan="3" class="M__body">1</td>
    </tr>
    <tr>
      <td colspan="1" class="M__white">1</td>
      <td colspan="2" class="M__black">1</td>
      <td colspan="4" class="M__body">1</td>
      <td colspan="4" class="M__black">1</td>
      <td colspan="1" class="M__white">1</td>
    </tr>
    <tr>
      <td colspan="3" class="M__white">1</td>
      <td colspan="7" class="M__body">1</td>
      <td colspan="2" class="M__white">1</td>
    </tr>
    <tr>
      <td colspan="2" class="M__white">1</td>
      <td colspan="2" class="M__black">1</td>
      <td colspan="1" class="M__red">1</td>
      <td colspan="3" class="M__black">1</td>
      <td colspan="4" class="M__white">1</td>
    </tr>
    <tr>
      <td colspan="1" class="M__white">1</td>
      <td colspan="3" class="M__black">1</td>
      <td colspan="1" class="M__red">1</td>
      <td colspan="2" class="M__black">1</td>
      <td colspan="1" class="M__red">1</td>
      <td colspan="3" class="M__black">1</td>
      <td colspan="1" class="M__white">1</td>
    </tr>
    <tr>
      <td colspan="4" class="M__black">1</td>
      <td colspan="4" class="M__red">1</td>
      <td colspan="4" class="M__black">1</td>
    </tr>
    <tr>
      <td colspan="2" class="M__body">1</td>
      <td colspan="1" class="M__black">1</td>
      <td colspan="1" class="M__red">1</td>
      <td colspan="1" class="M__body">1</td>
      <td colspan="2" class="M__red">1</td>
      <td colspan="1" class="M__body">1</td>
      <td colspan="1" class="M__red">1</td>
      <td colspan="1" class="M__black">1</td>
      <td colspan="2" class="M__body">1</td>
    </tr>
    <tr>
      <td colspan="3" class="M__body">1</td>
      <td colspan="6" class="M__red">1</td>
      <td colspan="3" class="M__body">1</td>
    </tr>
    <tr>
      <td colspan="2" class="M__body">1</td>
      <td colspan="8" class="M__red">1</td>
      <td colspan="2" class="M__body">1</td>
    </tr>
    <tr>
      <td colspan="2" class="M__white">1</td>
      <td colspan="3" class="M__red">1</td>
      <td colspan="2" class="M__white">1</td>
      <td colspan="3" class="M__red">1</td>
      <td colspan="2" class="M__white">1</td>
    </tr>
    <tr>
      <td colspan="1" class="M__white">1</td>
      <td colspan="3" class="M__black">1</td>
      <td colspan="4" class="M__white">1</td>
      <td colspan="3" class="M__black">1</td>
      <td colspan="1" class="M__white">1</td>
    </tr>
    <tr>
      <td colspan="4" class="M__black">1</td>
      <td colspan="4" class="M__white">1</td>
      <td colspan="4" class="M__black">1</td>
    </tr>
  </tbody>
</table>

<style>
  .M__white {
    background-color: white;
    color: white;
  }
  .M__body {
    background-color: #F6BC52;
    color: #F6BC52;
  }
  .M__red {
    background-color: #CC4220;
    color: #CC4220;
  }
  .M__black {
    background-color: #867724;
    color: #867724;
  }
</style>
other contents
social