CSS HTML 初心者 勉強中。

CSS HTML 初心者です。備忘録的メモです。

HTMLで表をつくりたい。いろいろなパターン編。

 表を作りたい。第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>

 

 

 

気が向いたらパターンを増やします。 

今回はこのへんで。(*'▽')/