No.3
- 回答日時:
table関連のプロパティは、ブロックやインライン要素などの他のプロパティと違うので区別して覚えましょう。
ここではスペースの関係でごく簡単にしか説明できません。
詳しくは、
★17. 表について ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
(注)CSS2.1であつても、table関連のプロパティは、すべてに対応しているブラウザは現時点でも皆無ですから注意すること。
下記はサンプルです。border-spacing:の値がひとつのときは上下左右、ふたつあるときは前の数字が左右、後ろの数字が上下になります。
なお、タブは_に置換してあります。
<table summary="縦の間隔">
_<tbody>
__<tr>
___<th abbr="あ">あ行</th><td>あ</td><td>い</td><td>う</td><td>え</td><td>お</td>
__</tr>
__<tr>
___<th abbr="か">か行</th><td>か</td><td>き</td><td>く</td><td>け</td><td>こ</td>
__</tr>
__<tr>
___<th abbr="さ">さ行</th><td>さ</td><td>し</td><td>す</td><td>せ</td><td>そ</td>
__</tr>
_</tbody>
</table>
<table summary="横の間隔">
_<tbody>
__<tr>
___<th abbr="あ">あ行</th><td>あ</td><td>い</td><td>う</td><td>え</td><td>お</td>
__</tr>
__<tr>
___<th abbr="か">か行</th><td>か</td><td>き</td><td>く</td><td>け</td><td>こ</td>
__</tr>
__<tr>
___<th abbr="さ">さ行</th><td>さ</td><td>し</td><td>す</td><td>せ</td><td>そ</td>
__</tr>
_</tbody>
</table>
において、
table{
_border-collapse:separate;
_border:solid 2px black;
_margin: 10px auto;
}
table[summary="縦の間隔"]{
_border-spacing:0 10px;
}
table[summary="横の間隔"]{
_border-spacing:10px 0;
}
table th,table td{
_border:solid 1px gray;
_width: 6em;
}
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- MySQL SQL任意に並び替えをしたい 2 2023/08/28 10:47
- Perl PERL 1 2022/04/26 14:15
このQ&Aを見た人はこんなQ&Aも見ています
-
プロが教えるわが家の防犯対策術!
ホームセキュリティのプロが、家庭の防犯対策を真剣に考える 2組のご夫婦へ実際の防犯対策術をご紹介!どうすれば家と家族を守れるのかを教えます!
-
テーブルセル余白(例えば左側だけ、上側だけ、など)
HTML・CSS
-
テーブルタグの中にdivを含めてはダメ?
HTML・CSS
-
HTML <td></td>タグ セル内余白を無くす方法
ホームページ作成・プログラミング
-
-
4
tableタグとformタグの組み合わせ
HTML・CSS
-
5
htmlの文字が縦書きになる
HTML・CSS
-
6
TABLEのセルの中の文字を行単位、セル単位で色を変えたい
HTML・CSS
-
7
liタグの中に<p>タグやら<dl>を入れるのはあり?
HTML・CSS
-
8
<td>中の文字列に<p>は必要?
HTML・CSS
-
9
cssファイルの名称付け
HTML・CSS
-
10
tableにul,または,olを入れられますか?
ホームページ作成・プログラミング
-
11
CSSのtransform: translate(-50%,-50%);を行う意味
HTML・CSS
-
12
テーブル内に画像を表示したい。
HTML・CSS
-
13
htmlで改行タグを入れていないのに改行される
HTML・CSS
-
14
JavaScriptで特定のtdタグにclass名をつけたい
JavaScript
-
15
文字の位置、上下のマージンがずれる
HTML・CSS
-
16
<table>の高さ固定。情報増加時、高さ自動変化
HTML・CSS
-
17
html でのテキスト結合について
その他(プログラミング・Web制作)
-
18
ラジオボタンが両方とも選択できてしまう
HTML・CSS
-
19
[CSS]tableでtd同士だけ行ごとに余白を付けて、中の縦罫線だけ点線にする
HTML・CSS
-
20
テーブルの行を折りたたみたいのですが、detailsタグとsummaryタグを使ってもうまくいきませ
HTML・CSS
関連するカテゴリからQ&Aを探す
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルの任意の列を非表示に...
-
テーブルのセルに画像をピッタ...
-
テーブルの表示がずれます
-
HTMLのrowspan
-
テーブルを2つ横に並べる
-
tableにul,または,olを入れられ...
-
テーブルの行を折りたたみたい...
-
HTMLのテーブルで桁をそろ...
-
セルをまたがるリンク。
-
逆L字の表(table)組み
-
HTML <td></td>タグ セル内余...
-
画像と画像の間の空白
-
ウィキペディアのリンクの仕組...
-
TABLE内の枠線を一部消すには
-
tableコーディング 幅ピッタリ...
-
セル内の文字の色とサイズの指定
-
テーブルの外側の線を消す
-
HTMLで外部ファイルの読み込み
-
スタイルシートで colspan=3と...
-
スクロール付きのテーブルで、...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
テーブルの任意の列を非表示に...
-
tableにul,または,olを入れられ...
-
TRタグの余白をcssで設定するには
-
cssで、表示されるテキストによ...
-
HTML <td></td>タグ セル内余...
-
テーブルのヘッダとボディの幅...
-
文字列が入っているtdを削除せ...
-
テーブルのセルに画像をピッタ...
-
テーブルの行の高さを指定する...
-
テーブルの表示がずれます
-
ホームページ 表の上の余白を...
-
テーブルのセルにアンカー
-
テーブルタグのセルの幅の一部...
-
逆L字の表(table)組み
-
中に<table></table>が使えるア...
-
tableでcolspanを使うと次行以...
-
スタイルシートで colspan=3と...
-
TABLE内の枠線を一部消すには
-
テーブルの上に空行が入る・・...
おすすめ情報