HTML Manual - TABLE

HTML
HTML Manual

[Home] [Font] [Marquee] [Table] [etc]

基本構造

（ソース）
<TABLE border="2">
  <TR>
    <TD>
    あいうえお
    </TD>
  </TR>
</TABLE>

（表示例）

あいうえお

３行３列

（ソース）
<TABLE border="2">
  <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>

（表示例）

1	2	3
4	5	6
7	8	9

３行３列（一部　行・列　違い）

（ソース）
(1)３行目のみ２列
<TABLE border="2">
  <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 colspan="2">8</TD>
  </TR>
</TABLE>

(1)３列目のみ２行
<TABLE border="2">
  <TR>
    <TD>1</TD><TD>2</TD><TD>3</TD>
  </TR>
  <TR>
    <TD>4</TD><TD>5</TD><TD rowspan="2">6</TD>
  </TR>
  <TR>
    <TD>7</TD><TD>8</TD>
  </TR>
</TABLE>

（表示例）
(1)３行目のみ２列

1	2	3
4	5	6
7	8

(1)３列目のみ２行

1	2	3
4	5	6
7	8	6

枠の大きさ

（ソース）
<TABLE border="2" width="200" height="100">
  <TR>
    <TD>
    あいうえお
    </TD>
  </TR>
</TABLE>

（表示例）

あいうえお

枠内の配置

（ソース）
<TABLE border="2" width="200" height="100">
  <TR>
    <TD align="right" valign="bottom">
    あいうえお
    </TD>
  </TR>
</TABLE>

（表示例）

あいうえお

色指定

（ソース）
(1)
<TABLE border="2" bgcolor="00ff00" bordercolor="ff0000">
  <TR>
    <TD>
    あいうえお
    </TD>
  </TR>
</TABLE>

(2)
<TABLE border="2" bgcolor="00ff00" bordercolorlight="#ff00ff" bordercolordark="#0000ff">
  <TR>
    <TD>
    あいうえお
    </TD>
  </TR>
</TABLE>

（表示例）
(1)

あいうえお

(2)

あいうえお

枠の設定

（ソース）
(1)枠内の設定
<TABLE border="2" cellpadding="10">
  <TR>
    <TD>
    あいうえお
    </TD>
  </TR>
</TABLE>

(2)枠の設定
<TABLE border="2" cellspacing="10">
  <TR>
    <TD>
    あいうえお
    </TD>
  </TR>
</TABLE>

（表示例）
(1)枠内の設定

あいうえお

(2)枠の設定

あいうえお

題・項目

（ソース）
<TABLE border="2" width="200">
  <CAPTION>title</CAPTION>
  <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>

（表示例）

title
1	2	3
4	5	6
7	8	9