以前の記事でExcelの表をWebページのテーブルに変換する方法の事例を紹介しました。
今回は、テーブルの装飾や文字の配置調整の方法をご紹介します。
次のHTMLコードは前述の記事で使用していたテーブルのものです。
<table class="has-fixed-layout">
<tbody>
<tr><td rowspan="2">月</td><td rowspan="2">日</td><td rowspan="2">曜</td><td rowspan="2">イベント</td><td rowspan="2">場所</td><td colspan="2">区分</td></tr>
<tr><td>住区住民<br>会議活動</td><td>部会<br>活動</td></tr><tr><td rowspan="4">4</td><td>1</td><td>土</td><td>桜フェスティバル</td><td>××公園</td><td>○</td><td> </td></tr>
<tr><td>24</td><td>月</td><td>第1回常任委員会</td><td>○○住区センター</td><td>○</td><td> </td></tr>
<tr><td>28</td><td>金</td><td>＜生活＞講演会「災害に備える」</td><td>○○住区センター</td><td> </td><td>○</td></tr>
<tr><td>29</td><td>土</td><td>＜青少年＞歩こう会とゲーム大会</td><td>××公園</td><td> </td><td>○</td></tr>
<tr><td rowspan="2">5</td><td>18</td><td>木</td><td>第32回住区住民会議定期総会</td><td>○○住区センター</td><td>○</td><td> </td></tr>
<tr><td>20</td><td>土</td><td>＜スポーツ＞グラウンドゴルフ研修会</td><td>▲▲ゴルフコース</td><td> </td><td>○</td></tr>
<tr><td rowspan="3">6</td><td>17</td><td>土</td><td>＜防災＞地域防災教育訓練（地域・学校合同）</td><td>○○小学校</td><td> </td><td>○</td></tr>
<tr><td>18</td><td>日</td><td>＜施設運営＞避難誘導訓練</td><td>○○住区センター</td><td> </td><td>○</td></tr>
<tr><td>22</td><td>木</td><td>第2回常任委員会</td><td>○○住区センター</td><td>○</td><td> </td></tr>
<tr><td rowspan="4">7</td><td>5</td><td>水</td><td>住区まつり実行委員会</td><td>○○住区センター</td><td>○</td><td> </td></tr>
<tr><td>15</td><td>土</td><td>盆踊り講習会</td><td>○○住区センター</td><td>○</td><td> </td></tr>
<tr><td>22</td><td>土</td><td>盆踊り講習会</td><td>○○住区センター</td><td>○</td><td> </td></tr>
<tr><td>27・28</td><td>木・金</td><td>盆踊り大会</td><td>××公園</td><td>○</td><td> </td></tr>
<tr><td rowspan="3">8</td><td rowspan="2">17～19</td><td rowspan="2">木～土</td><td>＜青少年＞夏休みキャンプ</td><td>◆◆◆園</td><td> </td><td>○</td></tr>
<tr><td>＜生活＞リサイクル手芸教室</td><td>○○住区センター</td><td> </td><td>○</td></tr><tr><td>24</td><td>木</td><td>第3回常任委員会</td><td>○○住区センター</td><td>○</td><td> </td></tr>
<tr><td rowspan="3">9</td><td>5</td><td>火</td><td>住区まつり実行委員会</td><td>○○住区センター</td><td>○</td><td> </td></tr><tr><td>10</td><td>日</td><td>＜施設運営＞AED訓練</td><td>○○住区センター</td><td> </td><td>○</td></tr>
<tr><td>29</td><td>金</td><td>＜交通＞自転車点検と安全教室</td><td>○○小学校</td><td> </td><td>○</td></tr><tr><td rowspan="3">10</td><td>3</td><td>火</td><td>住区まつり実行委員会</td><td>○○住区センター</td><td>○</td><td> </td></tr>
<tr><td>12</td><td>木</td><td>第4回常任委員会</td><td>○○住区センター</td><td>○</td><td> </td></tr><tr><td>27・28</td><td>金・土</td><td>住区まつり</td><td>○○住区センター / ○○小学校</td><td>○</td><td> </td></tr>
<tr><td rowspan="6">11</td><td rowspan="3">4</td><td rowspan="3">土</td><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 rowspan="2">17</td><td rowspan="2">金</td><td>＜施設運営＞利用者懇談会</td><td>○○住区センター</td><td> </td><td>○</td></tr>
<tr><td>＜生活＞社会見学</td><td>崎陽軒工場</td><td> </td><td>○</td></tr>
<tr><td>30</td><td>木</td><td>火まつり実行委員会</td><td>○○住区センター</td><td>○</td><td> </td></tr>
<tr><td rowspan="3">12</td><td>21</td><td>木</td><td>第5回常任委員会</td><td>○○住区センター</td><td>○</td><td> </td></tr>
<tr><td rowspan="2">23</td><td rowspan="2">土</td><td>＜生活＞社会見学</td><td>○○住区センター</td><td> </td><td>○</td></tr>
<tr><td>＜スポーツ＞中央地区スポーツ大会</td><td>××体育館</td><td> </td><td>○</td></tr>
<tr><td rowspan="4">1</td><td rowspan="2">13</td><td rowspan="2">土</td><td>書き初め大会</td><td>○○住区センター</td><td>○</td><td> </td></tr>
<tr><td>火まつり大会</td><td>××公園</td><td>○</td><td> </td></tr>
<tr><td>21</td><td>日</td><td>＜防災＞普通救命（AED含）講習会</td><td>○○住区センター</td><td> </td><td>○</td></tr>
<tr><td>28</td><td>日</td><td>町会・住区合同新年会</td><td>○○住区センター</td><td>○</td><td> </td></tr>
<tr><td rowspan="3">2</td><td>15</td><td>木</td><td>第6回常任委員会</td><td>○○住区センター</td><td>○</td><td> </td></tr>
<tr><td rowspan="2">18</td><td rowspan="2">日</td><td>＜青少年＞新入学児童交通安全教室</td><td>○○小学校</td><td> </td><td>○</td></tr>
<tr><td>＜防犯＞防犯のつどい</td><td>○○住区センター</td><td> </td><td>○</td></tr>
<tr><td rowspan="2">3</td><td>9</td><td>土</td><td>＜青少年＞××地区ドッジボ-ル大会</td><td>××体育館</td><td> </td><td>○</td></tr>
<tr><td>15</td><td>金</td><td>第7回常任委員会</td><td>○○住区センター</td><td>○</td><td> </td></tr>
</tbody>
</table>私のサイトはテーマにCocoonを設定しているため、デフォルトで行ごとに交互に着色・無色設定されるようになっています。
セル結合（colspan,rowspan）していない場合このままで良いのですが、そうでない場合には、セル結合に伴い着色箇所が想定通りにならないためCSSで調整していきます。また、Excelの表を再現するため、セル内の文字列配置の基本を中央揃えにしておきます。
/* セルの配置を中央揃えにする */
table td{
text-align: center;
background-color:white;
}次に、一部の列のセル中文字列配置を左揃えに変更します。
table td:nth-last-child(3),
table td:nth-last-child(4){
text-align: left;
}nth-last-child(n)としたのは、前から数えたときにセル結合箇所が発生した場合に、CSSの装飾設定がずれることが確認されたためです。
最後に見出しの2列を装飾します。指定の色はサイトの規定色に揃えるなどお好みの設定でOKです。
table tr:nth-of-type(1) td,
table tr:nth-of-type(2) td{
text-align:center;
background-color:#c7d8f6 !important;/*#467FE1の透明度30%と同色*/
border: 1px solid #467FE1 !important;
border-collapse: collapse;
}まとめ
- テーブルの記述は、改めて見ても煩雑だと思います。
- テーブルで表現するにあたっては、極力セル結合をしない工夫をした方が良い。
コメント