htmlで特殊な表を作成する方法

2013/10/03 12:15

このQ&Aのポイント

htmlで特殊な表を作成する方法を解説します。赤色の枠線をなしにしたり、列を統合したりするテクニックを紹介します。
CSSを使わずに単純なtableタグで特殊な表を作成する方法を解説します。枠線や列を統合するテクニックについて詳しく説明します。
htmlのtableタグを使って特殊な表を作成する方法を紹介します。枠線の設定や列の統合方法について分かりやすく解説します。

htmlで、特殊な表をつくりたい

お世話になります。添付の様な表をhtmlで作成したいのですが、どのようにすれば作成出来るでしょうか？ ※赤色の枠線を本当は、「枠線なし」の状態にしたいのです。 ※一番左の列は、2行目から2つ一組で統合　それ以外の列は、実際には統合しておらず、　2行目から2つ一組であるかのように枠線を表示可能でしたら、CSSではなく、単純なtableタグで実現したいと思っております。何卒宜しくお願い致します。 ------がんばった所までのソース-------- <table width="100%"> <tr> <td bgcolor="#000000"> </td> <td align="center">1</td> <td align="center">2</td> <td align="center">3</td> <td align="center">4</td> <td align="center">5</td> <td align="center">6</td> </tr> <tr> <td rowspan="2" align="center">1</td> <td align="center">a</td> <td align="center">b</td> <td align="center">c</td> <td align="center">d</td> <td align="center">e</td> <td align="center">f</td> </tr> <tr> <td align="center">A</td> <td align="center">B</td> <td align="center">C</td> <td align="center">D</td> <td align="center">E</td> <td align="center">F</td> </tr> <tr> <td rowspan="2" align="center">2</td> <td align="center">g</td> <td align="center">h</td> <td align="center">i</td> <td align="center">j</td> <td align="center">k</td> <td align="center">l</td> </tr> <tr> <td align="center">G</td> <td align="center">H</td> <td align="center">I</td> <td align="center">J</td> <td align="center">K</td> <td align="center">L</td> </tr> <tr> <td rowspan="2" align="center">3</td> <td align="center">a</td> <td align="center">b</td> <td align="center">c</td> <td align="center">d</td> <td align="center">e</td> <td align="center">f</td> </tr> <tr> <td align="center">A</td> <td align="center">B</td> <td align="center">C</td> <td align="center">D</td> <td align="center">E</td> <td align="center">F</td> </tr> <tr> <td rowspan="2" align="center">4</td> <td align="center">g</td> <td align="center">h</td> <td align="center">i</td> <td align="center">j</td> <td align="center">k</td> <td align="center">l</td> </tr> <tr> <td align="center">G</td> <td align="center">H</td> <td align="center">I</td> <td align="center">J</td> <td align="center">K</td> <td align="center">L</td> </tr> <tr> <td rowspan="2" align="center">5</td> <td align="center">a</td> <td align="center">b</td> <td align="center">c</td> <td align="center">d</td> <td align="center">e</td> <td align="center">f</td> </tr> <tr> <td align="center">A</td> <td align="center">B</td> <td align="center">C</td> <td align="center">D</td> <td align="center">E</td> <td align="center">F</td> </tr> <tr> <td rowspan="2" align="center">6</td> <td align="center">g</td> <td align="center">h</td> <td align="center">i</td> <td align="center">j</td> <td align="center">k</td> <td align="center">l</td> </tr> <tr> <td align="center">G</td> <td align="center">H</td> <td align="center">I</td> <td align="center">J</td> <td align="center">K</td> <td align="center">L</td> </tr> </table>

kgyqk433
お礼率27% (220/805)

HTML
回答数3
ありがとう数1

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

chie65536（@chie65535）
ベストアンサー率44% (8812/19983)

2013/10/03 13:20 回答No.3

> <td align="center">L</td> </tr> </table> </td> </tr> <tr> <td align="center">5</td> <td> <table border=0 cellpadding=0 cellspacing=0 width="100%"> <tr> <td align="center">a</td> </tr> <tr> <td align="center">A</td> </tr> </table> </td> <td> <table border=0 cellpadding=0 cellspacing=0 width="100%"> <tr> <td align="center">b</td> </tr> <tr> <td align="center">B</td> </tr> </table> </td> <td> <table border=0 cellpadding=0 cellspacing=0 width="100%"> <tr> <td align="center">c</td> </tr> <tr> <td align="center">C</td> </tr> </table> </td> <td> <table border=0 cellpadding=0 cellspacing=0 width="100%"> <tr> <td align="center">d</td> </tr> <tr> <td align="center">D</td> </tr> </table> </td> <td> <table border=0 cellpadding=0 cellspacing=0 width="100%"> <tr> <td align="center">e</td> </tr> <tr> <td align="center">E</td> </tr> </table> </td> <td> <table border=0 cellpadding=0 cellspacing=0 width="100%"> <tr> <td align="center">f</td> </tr> <tr> <td align="center">F</td> </tr> </table> </td> </tr> <tr> <td align="center">6</td> <td> <table border=0 cellpadding=0 cellspacing=0 width="100%"> <tr> <td align="center">g</td> </tr> <tr> <td align="center">G</td> </tr> </table> </td> <td> <table border=0 cellpadding=0 cellspacing=0 width="100%"> <tr> <td align="center">h</td> </tr> <tr> <td align="center">H</td> </tr> </table> </td> <td> <table border=0 cellpadding=0 cellspacing=0 width="100%"> <tr> <td align="center">i</td> </tr> <tr> <td align="center">I</td> </tr> </table> </td> <td> <table border=0 cellpadding=0 cellspacing=0 width="100%"> <tr> <td align="center">j</td> </tr> <tr> <td align="center">J</td> </tr> </table> </td> <td> <table border=0 cellpadding=0 cellspacing=0 width="100%"> <tr> <td align="center">k</td> </tr> <tr> <td align="center">K</td> </tr> </table> </td> <td> <table border=0 cellpadding=0 cellspacing=0 width="100%"> <tr> <td align="center">l</td> </tr> <tr> <td align="center">L</td> </tr> </table> </td> </tr> </table> 文字数オーバーで途中でぶった切ったので、繋げて使用すること。

質問者

お礼 2013/10/03 13:35

心の底からありがとうございます！！！！！！！

ログインすると、全ての回答が全文表示されます。

その他の回答 (2)

chie65536（@chie65535）
ベストアンサー率44% (8812/19983)

2013/10/03 13:17 回答No.2

<table border=1 cellpadding=0 cellspacing=0 width="100%"> <tr><td bgcolor="#000000"> </td><td align="center">1</td><td align="center">2</td><td align="center">3</td><td align="center">4</td><td align="center">5</td><td align="center">6</td></tr> <tr> <td align="center">1</td> <td> <table border=0 cellpadding=0 cellspacing=0 width="100%"> <tr> <td align="center">a</td> </tr> <tr> <td align="center">A</td> </tr> </table> </td> <td> <table border=0 cellpadding=0 cellspacing=0 width="100%"> <tr> <td align="center">b</td> </tr> <tr> <td align="center">B</td> </tr> </table> </td> <td> <table border=0 cellpadding=0 cellspacing=0 width="100%"> <tr> <td align="center">c</td> </tr> <tr> <td align="center">C</td> </tr> </table> </td> <td> <table border=0 cellpadding=0 cellspacing=0 width="100%"> <tr> <td align="center">d</td> </tr> <tr> <td align="center">D</td> </tr> </table> </td> <td> <table border=0 cellpadding=0 cellspacing=0 width="100%"> <tr> <td align="center">e</td> </tr> <tr> <td align="center">E</td> </tr> </table> </td> <td> <table border=0 cellpadding=0 cellspacing=0 width="100%"> <tr> <td align="center">f</td> </tr> <tr> <td align="center">F</td> </tr> </table> </td> </tr> <tr> <td align="center">2</td> <td> <table border=0 cellpadding=0 cellspacing=0 width="100%"> <tr> <td align="center">g</td> </tr> <tr> <td align="center">G</td> </tr> </table> </td> <td> <table border=0 cellpadding=0 cellspacing=0 width="100%"> <tr> <td align="center">h</td> </tr> <tr> <td align="center">H</td> </tr> </table> </td> <td> <table border=0 cellpadding=0 cellspacing=0 width="100%"> <tr> <td align="center">i</td> </tr> <tr> <td align="center">I</td> </tr> </table> </td> <td> <table border=0 cellpadding=0 cellspacing=0 width="100%"> <tr> <td align="center">j</td> </tr> <tr> <td align="center">J</td> </tr> </table> </td> <td> <table border=0 cellpadding=0 cellspacing=0 width="100%"> <tr> <td align="center">k</td> </tr> <tr> <td align="center">K</td> </tr> </table> </td> <td> <table border=0 cellpadding=0 cellspacing=0 width="100%"> <tr> <td align="center">l</td> </tr> <tr> <td align="center">L</td> </tr> </table> </td> </tr> <tr> <td align="center">3</td> <td> <table border=0 cellpadding=0 cellspacing=0 width="100%"> <tr> <td align="center">a</td> </tr> <tr> <td align="center">A</td> </tr> </table> </td> <td> <table border=0 cellpadding=0 cellspacing=0 width="100%"> <tr> <td align="center">b</td> </tr> <tr> <td align="center">B</td> </tr> </table> </td> <td> <table border=0 cellpadding=0 cellspacing=0 width="100%"> <tr> <td align="center">c</td> </tr> <tr> <td align="center">C</td> </tr> </table> </td> <td> <table border=0 cellpadding=0 cellspacing=0 width="100%"> <tr> <td align="center">d</td> </tr> <tr> <td align="center">D</td> </tr> </table> </td> <td> <table border=0 cellpadding=0 cellspacing=0 width="100%"> <tr> <td align="center">e</td> </tr> <tr> <td align="center">E</td> </tr> </table> </td> <td> <table border=0 cellpadding=0 cellspacing=0 width="100%"> <tr> <td align="center">f</td> </tr> <tr> <td align="center">F</td> </tr> </table> </td> </tr> <tr> <td align="center">4</td> <td> <table border=0 cellpadding=0 cellspacing=0 width="100%"> <tr> <td align="center">g</td> </tr> <tr> <td align="center">G</td> </tr> </table> </td> <td> <table border=0 cellpadding=0 cellspacing=0 width="100%"> <tr> <td align="center">h</td> </tr> <tr> <td align="center">H</td> </tr> </table> </td> <td> <table border=0 cellpadding=0 cellspacing=0 width="100%"> <tr> <td align="center">i</td> </tr> <tr> <td align="center">I</td> </tr> </table> </td> <td> <table border=0 cellpadding=0 cellspacing=0 width="100%"> <tr> <td align="center">j</td> </tr> <tr> <td align="center">J</td> </tr> </table> </td> <td> <table border=0 cellpadding=0 cellspacing=0 width="100%"> <tr> <td align="center">k</td> </tr> <tr> <td align="center">K</td> </tr> </table> </td> <td> <table border=0 cellpadding=0 cellspacing=0 width="100%"> <tr> <td align="center">l</td> </tr> <tr

ログインすると、全ての回答が全文表示されます。