2012年09月22日

テーブル table のセルを結合します。

スポンサード リンク

 表のセル <td> <th>を結合します。
<td rowspan="" colspan="">〜</td>

見出しセル thタグ を結合
セル1-1 セル1-2 セル1-3 セル1-4 セル1-5
セル2-1 セル2-2 セル2-3 水平方向 列結合 2
セル3-1 垂直方向
行結合 3
セル3-3 セル3-4 セル3-5
セル4-1 両方向
行 2、列 3 結合
セル5-1

heteml
【ちょ〜簡単設置】初心者でもすぐ使える、無料アクセス解析の決定版!
ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ

サンプルソース


<html>
 <head>
<title>テーブル table のセルを結合します。</title>
</head>
<body>
<table border="1" cellpadding="2">
 <tbody>
  <tr>
   <th colspan="5">見出しセル th タグを結合</th>
  </tr>
  <tr>
   <td>セル1-1</td>
   <td>セル1-2</td>
   <td>セル1-3</td>
   <td>セル1-4</td>
   <td>セル1-5</td>
  </tr>
  <tr>
   <td>セル2-1</td>
   <td>セル2-2</td>
   <td>セル2-3</td>
   <td colspan="2">水平方向 列結合 2</td>
  </tr>
  <tr>
   <td>セル3-1</td>
   <td rowspan="3">垂直方向<br>行結合 3</td>
   <td>セル3-3</td>
   <td>セル3-4</td>
   <td>セル3-5</td>
  </tr>
  <tr>
   <td>セル4-1</td>
   <td rowspan="2" colspan="3">両方向<br>行 2, 列 3 結合</td>
  </tr>
  <tr>
   <td>セル5-1</td>
  </tr>
 </tbody>
</table>
<!--背景色指定のコードは省略してあります-->
</body>
</html>
colspan="" 属性
横方向(列)の結合を指定します。結合を開始する<td>タグに colspan 属性を書き加え
<td colspan=""> , ""に結合するセルの数を入れます。
横のセル、1つを結合する場合は<td colspan="2">になります。
rowspan="" 属性
縦方向(行)の結合を指定します。結合を開始する<td>タグに rowspan 属性を書き加え
<td rowspan=""> , ""に結合するセルの数を入れます。
縦 横 両方向のセルの結合
結合を開始する<td>タグに colspan 属性と rowspan 属性を書き加えます。
<td rowspan="2" colspan="3"> //2行 3列のセルを結合します。

ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ
HTML テーブル( 表 ) の作成。
table-layoutプロパティ CSS テーブル
Table cellIndexプロパティ、セルのインデックス値の取得
HTML DOM Table rows,cellsコレクション
テーブルの行、表示/非表示 javascript
テーブルの表題を固定してデータ部分だけをスクロールさせる。
テーブルの行の背景色を一行おきに変えます。 javascript
テーブルの行の文字色,背景色を変えてハイライトします。



タグ:
posted by javaScript at 14:28 | 大阪 ☁ | テーブル | このブログの読者になる | 更新情報をチェックする
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。