コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > HTML5でセルの横幅を設定する方法

HTML5でセルの横幅を設定する方法

青灯夜游
リリース： 2021-12-17 16:38:48
オリジナル
2721 人が閲覧しました

HTML5 では、セル要素 (td または th) のcolspan 属性を使用して、セルの水平方向のスパンを設定できます。この属性は、セルがまたがる列の数を定義できます。構文 " " または ""。

HTML5でセルの横幅を設定する方法

このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。

HTML5 では、セルの水平スパンを設定したい場合は、colspan 属性を使用できます。 (colspan 属性は td または th 要素に作用します)

colspan 属性は、セルがまたがる列の数を定義するために使用されます。

構文:

<td colspan="number">
<th colspan="number">
ログイン後にコピー
値説明
number

セルがまたがる列数を指定します。

コメント: colspan="0" セルを列グループ (colgroup) の最後の列まで拡張するようにブラウザーに指示します。 。

例: 

<!DOCTYPE <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>设置单元格列跨度</title>
	</head>
	<body>

		<table width="550" border="1" cellspacing="0" cellpadding="5">
			<tr>
				<th colspan="2" align="center">存款（1~3月）</th>
			</tr>
			<tr>
				<td>一月</td>
				<td>3000 元</td>
			</tr>
			<tr>
				<td>二月</td>
				<td>5000 元</td>
			</tr>
			<tr>
				<td>三月</td>
				<td>3500 元</td>
			</tr>
			<tr>
				<td colspan="2">总计：11500 元</td>
			</tr>
		</table>
	</body>
</html>
ログイン後にコピー

HTML5でセルの横幅を設定する方法

関連する推奨事項: 「html ビデオ チュートリアル 」

以上がHTML5でセルの横幅を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
html5 シート
ソース：php.cn
前の記事：HTMLで画像を上下に動かす方法 次の記事：HTML5でテキストの斜体を設定する方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページのメインディスプレイに画像を表示するにはどうすればよいですか? 私がやりたいのは、NASAAPI を使用して写真を受信することです。これらの写真は、マイページのサムネイルとメインディスプレイに表示されます。コードがサムネイルから画像を取得してペ...
から 2024-04-06 15:33:12
0
1
433
PDF ファイルは HTML5 と JavaScript を実行できますか? PDF に埋め込まれるため、どのコンピュータでもブロックされないプログラムを作成してみようという愚かな考えがあります (JavaScript は PDF 内で実行できると聞きました...
から 2024-04-05 12:57:00
0
1
456
HTML5 の enctype と formenctype の違いは何ですか? HTMLLivingStandard (別名、新しい HTML5 仕様) の属性 enctype と formenctype の違いは何でしょうか?私は HTML Standard...
から 2024-04-02 11:47:56
0
1
275
ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...
から 2024-04-01 20:42:38
0
1
259
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート