@frswataru (本石渉)posted at 2021-02-18

HTML CSS tableの罫線デザイン

Q&A

解決したいこと

HTMLのtabelに罫線をつけてみたいです
tabele設計、罫線を付けるための基本の考え、応用としてデザインの付け方をご教授願います

イメージ

html_table

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table</title>
</head>

<body>
    <table>
        <tr>
            <td>学年</td>
            <td>組</td>
            <td>性別</td>
            <td>名前</td>
        </tr>
        <tr>
            <td rowspan="9">1</td>
            <td rowspan="3">1</td>
            <td rowspan="2">男</td>
            <td>飯田</td>
        </tr>
        <tr>
            <td>勝田</td>
        </tr>
        <tr>
            <td>女</td>
            <td>立川</td>
        </tr>
        <tr>
            <td rowspan="3">2</td>
            <td>男</td>
            <td>織戸</td>
        </tr>
        <tr>
            <td rowspan="2">女</td>
            <td>黒沢</td>
        </tr>
        <tr>
            <td>谷口</td>
        </tr>
        <tr>
            <td rowspan="3">3</td>
            <td rowspan="2">男</td>
            <td>伊藤</td>
        </tr>
        <tr>
            <td>大野</td>
        </tr>
        <tr>
            <td>女</td>
            <td>土屋</td>
        </tr>
    </table>

</body>

</html>

0 likes

3Answer

@amiya-se posted at 2021-02-19

テーブルはセルの集合体なので枠線を引く際に
四角で考えるか、縦線と横線で分けて考えるかという意味になります

↓四角と縦横で考えるイメージ図↓

「」は上辺+左辺と右辺+下辺をセットで捉える考え方です。

↓「と」で考えるイメージ図↓

四角で捉えると隣接するセルの枠線と被る為、描写しにくくなります。

縦横で捉えるとセルがつなぎ合わせてあるときに結構困ります。
※「何行目の枠線の下側をひく」「何列目の枠線の右側をひく」のような指定がしづらい。

「」←この形で捉えると枠線を引く際に２本になるところが出ないため、
CSSでデザインする際にborder-top,left,right,bottomを別々に設定できて便利です。

こういった理由で「」の形でテーブルを捉えて枠線を引くのがおススメです。

2Like

Comments

@frswataru
Questioner
天才

@amiya-se posted at 2021-02-19

結論　「」で見るのがいい、デザイン例は検索しましょう

□や│─で見る方法もありますが、複数のセルをつなぐテーブルだと組み方が難しくなります。

以下コードの例です。

（略）
</head>

<style>
  table {
    border-collapse: collapse;
    border-spacing: 0;
    border: 2px solid black;
  }
  th {
    background: greenyellow;
    color: white;
  }
  th, td {
    width: 80px;
    border-top: 1px solid black;
    border-left: 1px solid black;
    padding: 5px;
    text-align: center;
  }
  td.double {
    border-top: 3px double black;
  }
  td.dotted {
    border-top: 1px dotted black;
  }
</style>

<body>
    <table>
        <tr>
            <th>学年</th>
            <th>組</th>
            <th>性別</th>
            <th>名前</th>
        </tr>
        <tr>
            <td class="double" rowspan="9">1</td>
            <td class="double" rowspan="3">1</td>
            <td class="double" rowspan="2">男</td>
            <td class="double">飯田</td>
        </tr>
        <tr>
            <td class="dotted">勝田</td>
        </tr>
        <tr>
            <td class="dotted">女</td>
            <td class="dotted">立川</td>
        </tr>
（略）

いちばん上の行の<td>を<th>に変更しています。
二重線やドットの箇所はCSSを当てにくいためclassを付けました。

ブラウザではこう見えます

なお、デザインはHTML テーブルデザインで探してみるのがおススメです。

0Like

@frswataru posted at 2021-02-19

・結論　「」で見る

・□や│─で見る方法とは具体的にはどういったことでしょうか？？？