Xにはデフォルトで表を作成することができない(と思われる)ので、cssで作る必要がある。
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<table> <tbody> <tr> <th>あいうえお</th> <td>aaaaa</td> </tr> <tr> <th>かきくけこ</th> <td>bbbbb</td> </tr> <tr> <th>さしすせそ</th> <td>ccccc</td> </tr> </tbody> </table> |
css
1 2 3 4 5 6 7 8 9 10 11 12 13 |
th{ width:20%;/*thの幅*/ background-color: #edc972; border-right: solid 1px; border-bottom: solid 1px; } td{ border-right: solid 1px; border-bottom: solid 1px; } table{ border-collapse: collapse; /*collapse=隣接する線を重ねる separate=隣接する線の間隔をあける*/ } |
th | td |
かきくけこ | 指定したtd文章はこっちに入る |
さしすせそ |
2020/3/9追記
上記のcssだと枠線付けた際に変な感じになるので下のCSSを利用したほうがよいです。htmlは使いわまして大丈夫。
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
table{ border-collapse:collapse; /*collapse=隣接する線を重ねる*/ border-spacing:0; /*隣接するセルのボーダーとボーダーの間隔*/ } table th{ width:20%;/*thの幅*/ border:1px solid #e6e6e6; box-sizing:border-box;/*パディングとボーダーを幅と高さに含める*/ } table td{ box-sizing:border-box;/*パディングとボーダーを幅と高さに含める*/ } |
あとはborder: 太さ、種類、色 を各セレクタごとに設定すればOK
コメントを残す