テーブルレイアウトについての説明です。
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>項目1</th>
<th>項目2</th>
</tr>
<tr>
<th>項目A</th>
<td>テキスト</td>
<td>テキスト</td>
</tr>
<tr>
<th>項目B</th>
<td>テキスト</td>
<td>テキスト</td>
</tr>
</table>
項目1 | 項目2 | |
---|---|---|
項目A | テキスト | テキスト |
項目B | テキスト | テキスト |
項目1 | 項目2 | |
---|---|---|
項目A | テキスト | テキスト |
項目B | テキスト | テキスト |
テーブルレイアウトを利用して画像とテキストを横並びに配置するソースコードです。スマホでは縦並びになります。
<table class="table2x1">
<tr>
<td class="table_img1">
<img src="image/sample2.jpg" alt="サンプル画像">
</td>
<td class="table2x1_text">
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
</td>
</tr>
</table>
.table2x1 {
align-items: center;
width: 100%;
}
.table2x1_text {
width: 70%;
margin: 15px;
}
.table2x1 td {
padding: 10px;
}
.table2x1 img {
width: 100%;
}
.table2x1 {
align-items: center;
width: 100%;
}
.table2x1_text {
width: 100%;
margin: 5px 0;
}
.table2x1 td {
padding: 5px 0;
display: block;
}
.table2x1 img {
width: 100%;
}
![]() |
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。 |