表を作りたい。第2弾。
というか、コピペして使えるように、
前回の記事のHTMLを書きだしただけです。( ゚Д゚)
基本の記事はこちら
前回アップした記事です。
簡単な表
ノート | えんぴつ | 消しゴム |
---|---|---|
ある | ない | ある |
<table border="10" cellpadding="20">
<tr>
<th>ノート</th>
<th>えんぴつ</th>
<th>消しゴム</th>
</tr>
<tr>
<td>ある</td>
<td>ない</td>
<td>ある</td>
</tr>
</table>
表を装飾する
<caption> ☆☆☆ </caption>:タイトルをつける。
ノート | えんぴつ | 消しゴム |
---|---|---|
ある | ない | ある |
<table border="1" cellpadding="20">
<caption>タイトルだよ</caption>
<tr>
<th>ノート</th>
<th>えんぴつ</th>
<th>消しゴム</th>
</tr>
<tr>
<td>ある</td>
<td>ない</td>
<td>ある</td>
</tr>
</table>
colspan="n":n個のセルの連結。
下の3つを連結する場合。
ノート | えんぴつ | 消しゴム |
---|---|---|
まとめた |
<table border="1" cellpadding="20">
<tr>
<th>ノート</th>
<th>えんぴつ</th>
<th>消しゴム</th>
</tr>
<tr>
<td colspan="3">まとめた</td>
</tr>
</table>
右側下2つを連結する場合。
ノート | えんぴつ | 消しゴム |
---|---|---|
ある | ない |
<table border="1" cellpadding="20" >
<tr>
<th>ノート</th>
<th>えんぴつ</th>
<th>消しゴム</th>
</tr>
<tr>
<td colspan="2">ある</td>
<td>ない</td>
</tr>
</table>
セルのサイズを指定する。width="★%"
左の枠を表の幅が50%、かつ表の中身を中央揃え。
ノート | えんぴつ | 消しゴム |
---|---|---|
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz | 3本 | 2個 |
<table border="1" cellpadding="20">
<tr>
<th width="50%">ノート</th>
<th>えんぴつ</th>
<th>消しゴム</th>
</tr>
<tr>
<td align="center">ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz</td>
<td align="center">3本</td>
<td align="center">2個</td>
</tr>
</table>
気が向いたらパターンを増やします。
今回はこのへんで。(*'▽')/