1. 現在位置:
  2. トップページ
  3. tipsトップ
  4. HTML-テーブル
テーブルの枠 |  枠線とセルの内容の間の隙間 |  内枠の太さ |  複雑なテーブル |  テーブル内の文字位置 |  特殊枠 | 
テーブル
テーブルを使う事で文章の並びが綺麗に、また画像なども好きな場所に置けます。

テーブルの枠

シンプルテーブル

<TABLE BORDER=1>
<TR><TD>あ</TD><TD>い</TD></TR>
<TR><TD>う</TD><TD>え</TD></TR>
</TABLE>
枠線なし

<TABLE BORDER=0>
<TR><TD>あ</TD><TD>い</TD></TR>
<TR><TD>う</TD><TD>え</TD></TR>
</TABLE>
枠線の太さ3

<TABLE BORDER=3>
<TR><TD>あ</TD><TD>い</TD></TR>
<TR><TD>う</TD><TD>え</TD></TR>
</TABLE>
枠線の太さ5

<TABLE BORDER=5>
<TR><TD>あ</TD><TD>い</TD></TR>
<TR><TD>う</TD><TD>え</TD></TR>
</TABLE>

枠線とセルの内容の間の隙間

CELLPADDING=
枠線とセルの内容の間の隙間をピクセル単位で指定します。

<TABLE BORDER=1 CELLPADDING=3>
<TR><TD>あ</TD><TD>い</TD></TR>
<TR><TD>う</TD><TD>え</TD></TR>
</TABLE>
CELLPADDING=
枠線とセルの内容の間の隙間をピクセル単位で指定します。

<TABLE BORDER=1 CELLPADDING=5>
<TR><TD>あ</TD><TD>い</TD></TR>
<TR><TD>う</TD><TD>え</TD></TR>
</TABLE>
CELLPADDING=
枠線とセルの内容の間の隙間をピクセル単位で指定します。

<TABLE BORDER=1 CELLPADDING=7>
<TR><TD>あ</TD><TD>い</TD></TR>
<TR><TD>う</TD><TD>え</TD></TR>
</TABLE>
CELLPADDING=
枠線とセルの内容の間の隙間をピクセル単位で指定します。

<TABLE BORDER=1 CELLPADDING=10>
<TR><TD>あ</TD><TD>い</TD></TR>
<TR><TD>う</TD><TD>え</TD></TR>
</TABLE>

内枠の太さ

CELLSPACING=
内枠の太さを指定します。

<TABLE BORDER=1 CELLSPACING=5>
<TR><TD>あ</TD><TD>い</TD></TR>
<TR><TD>う</TD><TD>え</TD></TR>
</TABLE>
CELLSPACING=
内枠の太さを指定します。

<TABLE BORDER=1 CELLSPACING=7>
<TR><TD>あ</TD><TD>い</TD></TR>
<TR><TD>う</TD><TD>え</TD></TR>
</TABLE>
CELLSPACING=
内枠の太さを指定します。
0を指定すると、立体感の無い枠線

<TABLE BORDER=1 CELLSPACING=0>
<TR><TD>あ</TD><TD>い</TD></TR>
<TR><TD>う</TD><TD>え</TD></TR>
</TABLE>
セルとセルの間の隙間を無くすには、<TABLE>タグに BORDER=0 CELLSPACING=0 CELLPADDING=0 を指定し、
かつ、<TD>〜</TD>の間に一度も空白や改行を入れないようにする

<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
<TR><TD>あ</TD><TD>い</TD></TR>
<TR><TD>う</TD><TD>え</TD></TR>
</TABLE>

複雑なテーブル

<table border="1">
<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>
3つの列をまたぐ

<table border="1">
<tr><td colspan="3">3つの列をまたいでる</td></tr>
<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>
3つの列をまたいでる
3つの行をまたぐ

<table border="1">
<tr><td rowspan="3">3つの行を<BR>またいでる</td>
<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>
3つの行を
またいでる
組合せ1

<table border="1">
<tr><td colspan="4">4つの列をまたいでる</td></tr>
<tr><td rowspan="3">3つの行を<BR>またいでる</td>
<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>
4つの列をまたいでる
3つの行を
またいでる
組合せ2

<table border="1">
<tr><td rowspan="4">4つの行を<BR>またいでる</td>
<td colspan="3"><font size=2>3つの列をまたいでる</font></td></tr>
<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>
4つの行を
またいでる
3つの列をまたいでる
組合せ3

<table border="1">
<tr><td>1</td><td>2</td><td>3</td>
<td rowspan="3">3つの行を<BR>またいでる</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
<tr><td colspan="4">4つの列をまたいでる</td></tr>
</table>
3つの行を
またいでる
4つの列をまたいでる
組合せ4

<table border="1">
<tr><td>1</td><td>2</td>
<td rowspan="3">3つの行を<BR>またいでる</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>
<tr><td colspan="4">4つの列をまたいでる</td></tr>
</table></center>
</TD></TR>
</table>
3つの行を
またいでる
4つの列をまたいでる
組合せ5

<table border="1">
<tr><td>1</td><td>2</td>
<td rowspan="3">3つの行を<br>またいでる</td><td>3</td></tr>
<tr><td colspan="2">2つの列を<br>またいでる</td><td>4</td></tr>
<tr><td>5</td><td>5</td><td>6</td></tr>
<tr><td colspan="4">4つの列をまたいでる</td></tr>
</table>
3つの行を
またいでる
2つの列を
またいでる
4つの列をまたいでる

テーブル内の文字位置

<table border="1" width="100">
<tr><td>文章</td></tr>
</table>
文章
<table border="1" width="200">
<tr><td>文章</td></tr>
</table>
文章


<table border="1" width="200">
<tr><td align="left">文章</td></tr>
<tr><td align="center">文章</td></tr>
<tr><td align="right">文章</td></tr>
</table>
文章
文章
文章

<table border="1" width="200" HEIGHT="200">
<tr><td valign="top">文章</td></tr>
<tr><td valign="middle">文章</td></tr>
<tr><td valign="bottom">文章</td></tr>
</table>
文章
文章
文章

もちろんテーブルの中には、文章ではなく画像でもいいのです。

特殊な枠

<TABLE FRAME=box BORDERCOLOR="#ff0000">
<TR><TD>A1</TD><TD>A2</TD><TD>A3</TD></TR>
<TR><TD>B1</TD><TD>B2</TD><TD>B3</TD></TR>
<TR><TD>C1</TD><TD>C2</TD><TD>C3</TD></TR>
</TABLE>
FRAME=box

A1A2A3
B1B2B3
C1C2C3
FRAME=above

A1A2A3
B1B2B3
C1C2C3
FRAME=below

A1A2A3
B1B2B3
C1C2C3
FRAME=hsides

A1A2A3
B1B2B3
C1C2C3
FRAME=vsides

A1A2A3
B1B2B3
C1C2C3
FRAME=lhs

A1A2A3
B1B2B3
C1C2C3
FRAME=rhs

A1A2A3
B1B2B3
C1C2C3
FRAME=void

A1A2A3
B1B2B3
C1C2C3

FRAME=box
cellspacing=0
cellpadding=3

A1A2A3
B1B2B3
C1C2C3
FRAME=above
cellspacing=0
cellpadding=3

A1A2A3
B1B2B3
C1C2C3
FRAME=below
cellspacing=0
cellpadding=3

A1A2A3
B1B2B3
C1C2C3
FRAME=hsides
cellspacing=0
cellpadding=3

A1A2A3
B1B2B3
C1C2C3
FRAME=vsides
cellspacing=0
cellpadding=3

A1A2A3
B1B2B3
C1C2C3
FRAME=lhs
cellspacing=0
cellpadding=3

A1A2A3
B1B2B3
C1C2C3
FRAME=rhs
cellspacing=0
cellpadding=3

A1A2A3
B1B2B3
C1C2C3
FRAME=void
cellspacing=0
cellpadding=3

A1A2A3
B1B2B3
C1C2C3