Shuto's Front-End

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

普段 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

<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>

Page 1 / 1 _{(10 articles per page)}

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	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

other contents

social

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