HTML rowspan テーブルのセルを縦につなげる |
您所在的位置：网站首页 › td属性rowspan › HTML rowspan テーブルのセルを縦につなげる |
|
HTMLのrowspan属性で、テーブルのセルを縦につなげるサンプルです。 目次 サンプル rowspan属性 テーブルの左側のセルを縦につなぐ テーブルの右側のセルを縦につなぐ rowspan + 上下に行 rowspan + 左右に列 テーブルの行と列をつなぐ rowspan属性 < td rowspan="縦につなげるセルの数" > 指定したセルの数分、セルを縦につなげます。 セルを縦に3つつなげる場合、rowspan="3"とします。 縦に繋がる部分のtdタグは、rowspan属性のあるtdタグ以外は不要になります。 rowは行という意味です。テーブルの左側のセルを縦につなぐ テーブルの左側のセルをrowspanで縦につなげています。 rowspan セルを縦につなげる 赤 red 黄 yellow 青 blue上記サンプルのコードです。 table{border-collapse:collapse;} table td{border:1px solid} rowspan 赤 red 黄 yellow 青 blue7行目は、rowspan=3を指定しています。 7,8行目は、trタグ間にtdタグが2つあります。 11行目は、trタグ間にtdタグが1つあります。 14行目は、trタグ間にtdタグが1つあります。 テーブルの右側のセルを縦につなぐ テーブルの右側のセルをrowspanで縦につなげています。 赤 red rowspan セルを縦につなげる 黄 yellow 青 blue上記サンプルのコードです。 table{border-collapse:collapse;} table td{border:1px solid} 赤 red rowspan 黄 yellow 青 blue8行目は、rowspan=3を指定しています。 7,8行目は、trタグ間にtdタグが2つあります。 11行目は、trタグ間にtdタグが1つあります。 14行目は、trタグ間にtdタグが1つあります。 rowspan + 上下に行 rowspan + 上下に行のサンプルです。 テスト rowspan 赤 red 黄 yellow 青 blue テスト上記サンプルのコードです。 table {border-collapse: collapse;} table td {border: 1px solid} #t1 {background: #e0ffff} テスト rowspan 赤 red 黄 yellow 青 blue テスト12行目はrowspanで縦のセルをつなげています。 9,22行目は、colspanで横のセルをつなげています。 rowspan + 左右に列 rowspan + 左右に列のサンプルです。 赤 red rowspan テスト1 黄 yellow テスト2 青 blue テスト3上記サンプルのコードです。 table{border-collapse:collapse;} table td{border:1px solid} #t1{background:#e0ffff} 赤 red rowspan テスト1 黄 yellow テスト2 青 blue テスト38～10行目は、tdタグの行が3つありますが、 13,14行目と17,18行目は、tdタグの行は2つです。 テーブルの行と列をつなぐ テーブルの行と列をcolspanとrowspanでつなげています。 テスト1 テスト2 テスト3 テスト4 テスト5 テスト5 7 8 9 テスト10上記サンプルのコードです。 table{border-collapse:collapse;} table td{border:1px solid} #t1{background:#e0ffff} テスト1 テスト2 テスト3 テスト4 テスト5 テスト5 7 8 9 テスト109行目は、colspanとrowspanを指定しています。 関連の記事 HTML colspan テーブルのセルを横につなげる |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |