テーブルに枠線とマージン・パディングを適用させる方法についての説明です。
table {
width: 100%;
text-align: left;
border-collapse: collapse;
margin: 2% 0 6% 0;
}
th, td {
text-align: left;
border: 2px solid skyblue;
margin: 1% 0;
padding: 0.5em 1em 0.7em 1em
}
<table>
<tr>
<td></td>
<th>当社製品</th>
<th>他社製品</th>
</tr>
<tr>
<th>価格</th>
<td>3850円</td>
<td>4980円</td>
</tr>
<tr>
<th>性能</th>
<td>◎</td>
<td>◯</td>
</tr>
</table>
当社製品 | 他社製品 | |
---|---|---|
価格 | 3850円 | 4980円 |
性能 | ◎ | ◯ |
当社製品 | 他社製品 | |
---|---|---|
価格 | 3850円 | 4980円 |
性能 | ◎ | ◯ |