マイテクノロジー My Technology

テーブル（表）を作成するには <table> を使います。<table>～</table> がひとつのテーブル、<caption>～</caption> が表題、<tr>～</tr> が1行、<th>～</th> がヘッダのマス（カラム）、<td>～</td> がデータのマス（カラム）に対応します。border=1 は枠線の太さを示します。

<table border="1">
	<caption>【県庁所在地】</caption>
	<tr><th>県名</th><th>所在地</th></tr>
	<tr><td>北海道</td><td>札幌</td></tr>
	<tr><td>大阪府</td><td>大阪</td></tr>
	<tr><td>沖縄県</td><td>那覇</td></tr>
</table>

※ ↑ 左に行数が表示されていますが、コードブロックをダブルクリックすると行数以外のコードがすべて選択されます。Ctrl+Cなどでコピー可能です。

【県庁所在地】
県名	所在地
北海道	札幌
大阪府	大阪
沖縄県	那覇

テーブルの文字を改行しないようにするには

テーブルの中身を改行しないようにするには、<tr>、<th>、<td> などのタグに nowrap 属性を指定します。

<table border="1">
	<tr><th nowrap="nowrap">あああ</th><th>いいい</th><th>ううう</th></tr>
	<tr><td nowrap="nowrap">か</td><td>き</td><td>柿柿柿柿柿柿柿柿</td></tr>
</table>

あああ	いいい	ううう
か	き	柿柿柿柿柿柿柿柿

テーブル内のフォントを一括設定するには

<table>～</table> を、<font>～</font> で囲むことはできません。テーブル内のフォントの大きさや色を一括設定するには、スタイルシートを使うと便利です。下記の記述を <head>～</head> の間に追記してみてください。

<style type="text/css">
<!--
td, th {
  color: red;
  font-size: 200%;
  font-family: "ＭＳ ゴシック";
}
-->
</style>
 
もしくは、下記のように、各 <th> <td> に直接、記述します。
 
<table border="1">
	<tr>
		<th style="color: red; font-size: 200%; font-family:ＭＳ ゴシック">コード</th>
		<th style="color: red; font-size: 200%; font-family:ＭＳ ゴシック">商品名</th>
		<th style="color: red; font-size: 200%; font-family:ＭＳ ゴシック">ﾌﾘｶﾞﾅ</th>
	</tr>
	<tr>
		<td style="color: red; font-size: 200%; font-family:ＭＳ ゴシック">A0012</td>
		<td style="color: red; font-size: 200%; font-family:ＭＳ ゴシック">計算機</td>
		<td style="color: red; font-size: 200%; font-family:ＭＳ ゴシック">ｹｲｻﾝｷ</td>
	</tr>
</table>

コード	商品名	ﾌﾘｶﾞﾅ
A0012	計算機	ｹｲｻﾝｷ

カラム（セル）を連結（結合）するには

カラムを横や縦に連結するには <td> や <th> に属性を指定します。n には連結するカラムの数を指定します。

<table border="1">
	<tr><td colspan="2">横連結</td>                    </tr>
	<tr><td rowspan="2">縦連結</td><td>ＯＯ</td></tr>
	<tr>                                         <td>△△</td></tr>
</table>

横連結
縦連結	ＯＯ
	△△

空欄の見栄えをよくするには

テーブルの中に <td></td> のような空欄があると、その部分が凹んでくれずに見栄えが悪くなることがあります。この時は、<td><br></td> のように <br> を入れてやると、凹んで表示されるようです。

<table border="1">
 <tr><td><br /></td><td>ＯＯ</td></tr>
 <tr><td>ＯＯ</td><td>ＯＯ</td></tr>
</table>

	ＯＯ
ＯＯ	ＯＯ

→

	ＯＯ
ＯＯ	ＯＯ

テーブルの幅や高さを指定するには

テーブルに背景色や背景画像を指定するには、<table>、<tr>、<th>、<td> の width 属性や height 属性を指定します。または、スタイルシートの width や height を用います。ただし、HTML4.01 の仕様では、<table> タグに height 属性は指定できないので注意してください。

<table border="1" style="width: 200px; height: 80px;">
	<tr><td>日　　本</td><td>12,345,678</td></tr>
	<tr><td>アメリカ</td><td>987,654</td></tr>
</table>

日　　本	12,345,678
アメリカ	987,654

→

日　　本	12,345,678
アメリカ	987,654

カラムの内容を右寄せ、左寄せするには

<tr>、<th>、<td> に align 属性を指定することで、カラムの内容を右寄せ、中央配置、左寄せに、することができます。

<table border="1">
	<tr><td align="center">日本</td><td align="right">12,345,678</td></tr>
	<tr><td align="center">アメリカ</td><td align="right">987,654</td></tr>
</table>

日本	12,345,678
アメリカ	987,654

→

日本	12,345,678
アメリカ	987,654

カラムの内容を上寄せ、下寄せするには

<tr>、<th>、<td> に valign 属性を指定することで、カラムの内容を上に寄せたり、下に寄せに、することができます。

<table border="1" style="height: 45px;">
	<tr>
		<td valign="top">上寄せサンプル</td><td valign="bottom">下寄せサンプル</td>
	</tr>
</table>

上寄せサンプル

下寄せサンプル

テーブルの背景色を指定するには

テーブルに背景色を指定するには、<table>、<tr>、<th>、<td> の bgcolor 属性を指定します。スタイルシートの場合は background-color を使います。

<table border="1" bgcolor="#ffcccc">
	<tr><th>背景色</th><th>変わってます？</th></tr>
	<tr><td>変わってる</td><td>桃色？</td></tr>
	<tr><td>ピンク？</td><td>変わってるよネ！</td></tr>
</table>

背景色	変わってます？
変わってる	桃色？
ピンク？	変わってるよネ！

テーブルの背景画像を指定するには

テーブルに背景色や背景画像を指定するには、<table>、<tr>、<th>、<td> の background 属性を指定します。スタイルシートの場合は background-image を使います。

<table border="1" background="img/xxx.gif">
    <tr><th>背景画像</th><th>変わってます？</th></tr>
    <tr><td>変わってる</td><td>若葉？</td></tr>
    <tr><td>新芽？</td><td>変わってるよネ</td></tr>
</table>

<table border="1" style="background-image: url(img/xxx.gif);">
	<tr><th>背景画像</th><th>変わってます？</th></tr>
	<tr><td>変わってる</td><td>若葉？</td></tr>
	<tr><td>新芽？</td><td>変わってるよネ</td></tr>
</table>

背景画像	変わってます？
変わってる	若葉？
新芽？	変わってるよネ

テーブルを横に二つ並べるには

テーブルを横に二つ並べるには、外側にもうひとつ大きなテーブル（枠線無し）を設けます。

<table>
	<tr>
		<td>
			<table border="1">
				<tr><td>ID</td><td>テーブル名</td></tr>
				<tr><td>T-001</td><td>テーブル1</td></tr>
			</table>
		</td>
		<td>
			<table border="1">
				<tr><td>ID</td><td>テーブル名</td></tr>
				<tr><td>T-002</td><td>テーブル2</td></tr>
			</table>
		</td>
	</tr>
</table>

ID	テーブル名
T-001	テーブル1

ID	テーブル名
T-002	テーブル2

テーブルの枠線の色を変えるには

テーブルの枠線の色を変えるには、<table> タグに bordercolor などの属性を指定します。Internet Explorer では、bordercolordark（立体的な枠線の暗い部分）、bordercolorlight（立体的な枠線の明るい部分）の指定も可能です。

<table border="1" bordercolor="#b0c4de" bordercolordark="#708090">
    <tr>
        <th>商品名</th><th>定価</th>
    </tr>
    <tr>
        <td>たこ焼きソース味　8個入</td><td>500円</td>
    </tr>
    <tr>
        <td>イカ焼き 卵入り</td><td>300円</td>
    </tr>
</table>

商品名	定価
たこ焼きソース味　8個入	500円
イカ焼き卵入り	300円

テーブルの枠線をシンプルにするには

テーブルの枠線をシンプルにするには、<table> タグに cellspacing=0 属性を指定します。

<table border="1" cellspacing="0">
    <tr>
        <th>商品名</th><th>定価</th>
    </tr>
    <tr>
        <td>たこ焼きソース味　8個入</td><td>500円</td>
    </tr>
    <tr>
        <td>イカ焼き 卵入り</td><td>300円</td>
    </tr>
</table>

商品名	定価
たこ焼きソース味　8個入	500円
イカ焼き卵入り	300円

テーブルの枠線をもっと細くするには

テーブルを二重にして背景色を制御することで、細い枠線を書くことができます。Intenet Explorer と Netscape Navigator の両方の見栄えを整えるには、border=0 などの属性を省略しないでください。

<table border="0" bgcolor="#808080" cellspacing="0" cellpadding="0">
    <tr>
        <td>
            <table border="0" cellspacing="1" cellpadding="2">
            	<tr bgcolor="#ffffff"><th>商品名</th><th>定価</th></tr>
            	<tr bgcolor="#ffffff"><td>たこ焼き 8個入</td><td>500円</td></tr>
            	<tr bgcolor="#ffffff"><td>イカ焼き 卵入り</td><td>300円</td></tr>
            </table>
        </td>
    </tr>
</table>

商品名	定価
たこ焼き 8個入	500円
イカ焼き卵入り	300円

テーブルの枠線を点線にするには

テーブルの枠線を点線にするには、border="1" ではなく、スタイルシートで点線の枠線を引きます。

<table cellspacing="0" style="border-bottom: 1px dotted gray; border-left: 1px dotted gray;">
    <tr>
        <th style="border-top: 1px dotted gray; border-right: 1px dotted gray;">商品名</th>
        <th style="border-top: 1px dotted gray; border-right: 1px dotted gray;">定価</th>
    </tr>
    <tr>
        <td style="border-top: 1px dotted gray; border-right: 1px dotted gray;">たこ焼き 8個入</td>
        <td style="border-top: 1px dotted gray; border-right: 1px dotted gray;">500円</td>
    </tr>
    <tr>
        <td style="border-top: 1px dotted gray; border-right: 1px dotted gray;">イカ焼き 卵入り</td>
        <td style="border-top: 1px dotted gray; border-right: 1px dotted gray;">300円</td>
    </tr>
</table>

商品名	定価
たこ焼き 8個入	500円
イカ焼き卵入り	300円

HTML タグ HOME リスト

マイテクノロジー MyTechnologyはノンプロのプログラミング技術でWEBを構築することや、税理士の資格試験合格に向けての取り組み及びセミプロの稲作技術等をご紹介してまいります。