HTML応用

HTML5

CSS3

jQuery

PHP

デザインのコツ

SEO対策

テーブルを作成

このページでは、htmlで表を作成する方法を紹介します。

テーブルを構成するタグ

テーブルは、タグの組み立てが複雑なので、構造とそれぞれのタグの意味をしっかり理解してから作成しましょう。

<table>～</table>表全体を囲うタグ
<tr>～</tr>同じ段の全てセルを囲うタグ
<td>～</td>セル

見本

index.html
<table>
  <tr>  <td>1</td>  <td>2</td>  <td>3</td>  </tr>
  <tr>  <td>4</td>  <td>5</td>  <td>6</td>  </tr>
  <tr>  <td>7</td>  <td>8</td>  <td>9</td>  </tr>
</table>
style.css
table{
    border-collapse:collapse;
}
td{
    border:1px solid rgb(0%,0%,0%);
    padding:5px 20px;
}
border-collapse:○○;セル同士の隙間を空けるか結合するかを指定
collapse･･･結合
separate･･･隙間を空ける
見本ページを新しいタブで開く

見出しセルを使ってみよう

セルの1～3を見出しセルとして装飾を変えてみましょう。

index2.html
<table>
  <tr>  <th>1</th>  <th>2</th>  <th>3</th>  </tr>
  <tr>  <td>4</td>  <td>5</td>  <td>6</td>  </tr>
  <tr>  <td>7</td>  <td>8</td>  <td>9</td>  </tr>
</table>
<th>～</th>見出しセル･･･tdと使い方は同じ
cssで背景色をつける等して見出しらしくしましょう
style.css
table{
    border-collapse:collapse;
}
td{
    border:1px solid rgb(0%,0%,0%);
    padding:5px 20px;
}
th{
    border:1px solid rgb(0%,0%,0%);
    background:rgb(30%,30%,30%);
    color:rgb(100%,100%,100%);
    padding:5px 20px;
}
見本ページを新しいタブで開く

横にセルを結合してみよう

index3.html
<table>
  <tr>  <th colspan="3">1～3</th>  </tr>
  <tr>  <td>4</td>  <td>5</td>  <td>6</td>  </tr>
  <tr>  <td>7</td>  <td>8</td>  <td>9</td>  </tr>
</table>
colspan="○"右のセル○個分を結合する

もともと2と3があったセルは、結合され一つとなったので、一段目のセルはthかtdを一つだけ記述します。

見本ページを新しいタブで開く

縦にセルを結合してみよう

index4.html
<table>
 <tr> <th rowspan="3">1,4,7</th> <td>2</td> <td>3</td> </tr>
 <tr>                            <td>5</td> <td>6</td> </tr>
 <tr>                            <td>8</td> <td>9</td> </tr>
</table>
colspan="○"右のセル○個分を結合する

もともと2と3があったセルは、結合され一つとなったので、一段目のセルはthかtdを一つだけ記述します。

見本ページを新しいタブで開く
PAGE TOP