テーブルレイアウト - 個人サイトのための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講座

枠線とマージン・パディングの適用

《例》

《表示結果》

※ separate or 指定なしの場合

画像とテキストを横並び

HTML

CSS（PC）

CSS（スマホ）

《表示結果》