テーブルレイアウト - 個人サイトのためのCSS3講座

テーブルレイアウトについての説明です。

テーブルに枠線とマージン・パディングを適用させるには、枠線およびマージン・パディングのCSSをtd/thタグに適用させればOKです。その際、tableタグのCSSに「border-collapse: collapse」を指定し、隣接するセルのボーダーを重ねて表示させると綺麗になります。(「border-collapse: separate」を指定した場合、もしくは何も指定しない場合は隣接するセルのボーダーが間隔をあけて表示されます)

《例》

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 テキスト テキスト

※ separate or 指定なしの場合

項目1 項目2
項目A テキスト テキスト
項目B テキスト テキスト
▲ページの先頭へ

テーブルレイアウトを利用して画像とテキストを横並びに配置するソースコードです。スマホでは縦並びになります。

HTML

<table class="table2x1">
<tr>
<td class="table_img1">
<img src="image/sample2.jpg" alt="サンプル画像">
</td>
<td class="table2x1_text">
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
</td>
</tr>
</table>

CSS(PC)

.table2x1 {
align-items: center;
width: 100%;
}

.table2x1_text {
width: 70%;
margin: 15px;
}

.table2x1 td {
padding: 10px;
}

.table2x1 img {
width: 100%;
}

CSS(スマホ)

.table2x1 {
align-items: center;
width: 100%;
}

.table2x1_text {
width: 100%;
margin: 5px 0;
}

.table2x1 td {
padding: 5px 0;
display: block;
}

.table2x1 img {
width: 100%;
}

《表示結果》

サンプル画像

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

▲ページの先頭へ

>>CSS3講座メニューへ戻る