スポンサーサイト

--/--/-- --:-- | カテゴリ:スポンサー広告

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

tableタグ 結合セルでGO!

2006/01/31 21:50 | カテゴリ:未分類 | コメント (2) | トラックバック (0)

tableタグを使って、かっこいい表を作ろう。

いきなりサンプル↓
結合セル 2×2個別セル個別セル個別セル
個別セル個別セル個別セル
個別セル個別セル結合セル 2×3
個別セル個別セル
個別セル個別セル個別セル個別セル個別セル


td タグcolspanを加えると横方向に、rowspanを加えると縦方向にセルが結合します。
 <td colspan="○○" rowspan="▲▲">
   ○○:横方向セル数(数字) ▲▲:縦方向セル数(数字)
あとは、結合先のセルのtd タグを消してあげてください。
縦・横どちらか一方の場合は、片方だけ書けばOK。

サンプルのソース(高さは30にしてます)↓
<table frame="box">
 <tr height="30">
  <td rowspan="2" colspan="2" bgcolor="orange">結合セル 2×2</td><td>個別セル</td><td>個別セル</td><td>個別セル</td></tr>
 <tr height="30"><td>個別セル</td><td>個別セル</td><td>個別セル</td></tr>
 <tr height="30"><td>個別セル</td><td>個別セル</td><td rowspan="2" colspan="3" bgcolor="orange">結合セル 2×3</td></tr>
 <tr height="30"><td>個別セル</td><td>個別セル</td></tr><tr height="30"><td>個別セル</td><td>個別セル</td><td>個別セル</td><td>個別セル</td><td>個別セル</td></tr>
</table>

前記事で紹介したhtml作成ソフトで簡単に作れます。
ただし、記事中に表を入れる場合は、
 ・テキストフォーマットをhtmlタグのみに変更する(他の文には改行<br>を付ける)
 ・タグの空白(文字部分以外)をなくす。
以上のどちらかをしましょう。
スポンサーサイト

<< アフィリエイト・お小遣いサイト登録型リンク集設置しました | ホーム | 自分のブログのキーワード出現頻度は? >>


コメント

なるほど!

コメントなるべく表示するようにしますi-201
コムズ紹介記事書きましたi-189
tableタグは確かにカッコいいと思いますi-194
見やすくなりますよねi-179

コメントどもっです♪

コムズ・・・結構おいしいですよねi-189
審査もないし、お気にかもぉ~i-194

コメントの投稿


管理者にだけ表示を許可する

 BLOG TOP 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。