テーブル(表)を作成するには主に次のタグを用います。
<table border=1> <tr><td>●</td><td>■</td><td>▲</td></tr> <tr><td>○</td><td>□</td><td>△</td></tr> </table>
これをブラウザで表示すると次のようになります。
● | ■ | ▲ |
○ | □ | △ |
<td colspan=n> を用いると、右方向に n 個のセルを連結することができます。
<table border=1> <tr><td colspan=2>●</td><td>▲</td></tr> <tr><td>○</td><td>□</td><td>△</td></tr> </table>
これをブラウザで表示すると次のようになります。
● | ▲ | |
○ | □ | △ |
<td rowspan=n> を用いると、縦方向に n 個のセルを連結することができます。
<table border=1> <tr><td rowspan=2>●</td><td>■</td><td>▲</td></tr> <tr><td>□</td><td>△</td></tr> </table>
これをブラウザで表示すると次のようになります。
● | ■ | ▲ |
□ | △ |
border-collapse を用いることで、テーブルの枠線を細くすることができます。
<table border=1 style="border-collapse:collapse;"> <tr ><td>●</td><td>■</td><td>▲</td></tr> <tr><td>○</td><td>□</td><td>△</td></tr> </table>
これをブラウザで表示すると次のようになります。
● | ■ | ▲ |
○ | □ | △ |
background-color で、テーブルに色をつけることができます。
<table border=1> <tr style="background-color:yellow"><td>●</td><td>■</td><td>▲</td></tr> <tr><td style="background-color:#ffcccc">○</td><td>□</td><td>△</td></tr> </table>
これをブラウザで表示すると次のようになります。
● | ■ | ▲ |
○ | □ | △ |