HTMLテーブル テーブルボーダー制御の詳細
2022-01-16 14:54:19
上部のボーダーだけを表示する <table frame=above>
下のボーダーのみを表示する <table frame=below>
左右のフレームのみを表示する <table frame=vsides>
上下のボーダーのみを表示する <table frame=hsides>
左ボーダーのみを表示する <table frame=lhs>
右フレームのみ表示する <table frame=rhs>
ボーダーを表示しない <table frame=void>
<html>
<head>
<title>Form border hiding</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body { color:"#ffffff";
font-family: "宋体";
font-size: 12px;
margin-top : 4;
}
.t {
border: #000000; border-style: solid; border-width: 1px
}
td {
font-family: "Tahoma", "MS Shell Dlg"; font-size: 12px
}
textarea {border: 1 solid #000000"}
</style>
</head>
<body bgcolor="#999999" text="#000000">
<center>
<table width="600" border="0" cellspacing="0" cellpadding="8" class="t">
<tr>
<td>
<table border="1" width="200" cellpadding="0" cellspacing="0">
<tr align="center">
<td>pu</td>
<td>table</td>
</tr>
<tr align="center">
<td>pass</td>
<td>g</td>
</tr>
</table>
</td>
<td> This is a common form</td>
</tr>
<tr>
<td>
<table width="200" border="1" cellspacing="0" cellpadding="0" frame=above>
<tr align="center">
<td>header</td>
<td>up</td>
</tr>
<tr align="center">
<td>there</td>
<td>days</td>
</tr>
</table>
</td>
<td> Show top border only</td>
</tr>
<tr>
<td>
<table width="200" border="1" cellspacing="0" cellpadding="0" frame=below>
<tr>
<td align="center">feet</td>
<td align="center">down</td>
</tr>
<tr>
<td align="center">there</td>
<td align="center">ground</td>
</tr>
</table>
</td>
<td> Show lower border only</td>
</tr>
<tr>
<td>
<table width="200" border="1" cellspacing="0" cellpadding="0" frame=vsides>
<tr>
<td align="center">Up Without a Sky</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td align="center">Down to nowhere</td>
</tr>
</table>
</td>
<td> Show only the left and right boxes</td>
</tr>
<tr>
<td>
<table border="1" cellspacing="0" cellpadding="0" frame=hsides width="200">
<tr>
<td align="center"> remove both sides</td>
<td></td>
</tr>
<tr>
<td></td>
<td align="center">Only the word "king" remains</td>
</tr>
</table>
</td>
<td> Show top and bottom borders only</td>
</tr>
<tr>
<td>
<table width="200" border="1" cellspacing="0" cellpadding="0" frame=lhs>
<tr>
<td width="100" align="center">only</td>
<td width="100" align="center">there</td>
</tr>
<tr>
<td align="center">left</td>
<td align="center">side</td>
</tr>
</table>
</td>
<td> Show left border only</td>
</tr>
<tr>
<td>
<table width="200" border="1" cellspacing="0" cellpadding="0" frame=rhs>
<tr>
<td width="100" align="center">only</td>
<td width="100" align="center">there</td>
</tr>
<tr>
<td align="center">right</td>
<td align="center">side</td>
</tr>
</table>
</td>
<td> Show right box only</td>
</tr>
<tr>
<td>
<table width="200" border="1" cellspacing="0" cellpadding="0" frame=void>
<tr>
<td align="center">four weeks</td>
<td align="center">remove</td>
</tr>
<tr>
<td align="center"> Only stay</td>
<td align="center">middle</td>
</tr>
</table>
</td>
<td> Does not show any borders</td>
</tr>
<tr>
<td colspan="2">
<hr size="1" color=black>
The display and hiding of the table borders is controlled with the frame parameter. Please note that it only controls the border image of the table, not the cells.
Show only the top border <table frame=above>
Show only the bottom frame <table frame=below>
Show left and right frames only <table frame=vsides>
Show only top and bottom borders <table frame=hsides>
Show left border only <table frame=lhs>
Show right frame only <table frame=rhs>
Show no borders <table frame=void></td>
</tr>
</table>
</center>
</body>
</html>
下のボーダーのみを表示する <table frame=below>
左右のフレームのみを表示する <table frame=vsides>
上下のボーダーのみを表示する <table frame=hsides>
左ボーダーのみを表示する <table frame=lhs>
右フレームのみ表示する <table frame=rhs>
ボーダーを表示しない <table frame=void>
コピーコード
コードは以下の通りです。
<html>
<head>
<title>Form border hiding</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body { color:"#ffffff";
font-family: "宋体";
font-size: 12px;
margin-top : 4;
}
.t {
border: #000000; border-style: solid; border-width: 1px
}
td {
font-family: "Tahoma", "MS Shell Dlg"; font-size: 12px
}
textarea {border: 1 solid #000000"}
</style>
</head>
<body bgcolor="#999999" text="#000000">
<center>
<table width="600" border="0" cellspacing="0" cellpadding="8" class="t">
<tr>
<td>
<table border="1" width="200" cellpadding="0" cellspacing="0">
<tr align="center">
<td>pu</td>
<td>table</td>
</tr>
<tr align="center">
<td>pass</td>
<td>g</td>
</tr>
</table>
</td>
<td> This is a common form</td>
</tr>
<tr>
<td>
<table width="200" border="1" cellspacing="0" cellpadding="0" frame=above>
<tr align="center">
<td>header</td>
<td>up</td>
</tr>
<tr align="center">
<td>there</td>
<td>days</td>
</tr>
</table>
</td>
<td> Show top border only</td>
</tr>
<tr>
<td>
<table width="200" border="1" cellspacing="0" cellpadding="0" frame=below>
<tr>
<td align="center">feet</td>
<td align="center">down</td>
</tr>
<tr>
<td align="center">there</td>
<td align="center">ground</td>
</tr>
</table>
</td>
<td> Show lower border only</td>
</tr>
<tr>
<td>
<table width="200" border="1" cellspacing="0" cellpadding="0" frame=vsides>
<tr>
<td align="center">Up Without a Sky</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td align="center">Down to nowhere</td>
</tr>
</table>
</td>
<td> Show only the left and right boxes</td>
</tr>
<tr>
<td>
<table border="1" cellspacing="0" cellpadding="0" frame=hsides width="200">
<tr>
<td align="center"> remove both sides</td>
<td></td>
</tr>
<tr>
<td></td>
<td align="center">Only the word "king" remains</td>
</tr>
</table>
</td>
<td> Show top and bottom borders only</td>
</tr>
<tr>
<td>
<table width="200" border="1" cellspacing="0" cellpadding="0" frame=lhs>
<tr>
<td width="100" align="center">only</td>
<td width="100" align="center">there</td>
</tr>
<tr>
<td align="center">left</td>
<td align="center">side</td>
</tr>
</table>
</td>
<td> Show left border only</td>
</tr>
<tr>
<td>
<table width="200" border="1" cellspacing="0" cellpadding="0" frame=rhs>
<tr>
<td width="100" align="center">only</td>
<td width="100" align="center">there</td>
</tr>
<tr>
<td align="center">right</td>
<td align="center">side</td>
</tr>
</table>
</td>
<td> Show right box only</td>
</tr>
<tr>
<td>
<table width="200" border="1" cellspacing="0" cellpadding="0" frame=void>
<tr>
<td align="center">four weeks</td>
<td align="center">remove</td>
</tr>
<tr>
<td align="center"> Only stay</td>
<td align="center">middle</td>
</tr>
</table>
</td>
<td> Does not show any borders</td>
</tr>
<tr>
<td colspan="2">
<hr size="1" color=black>
The display and hiding of the table borders is controlled with the frame parameter. Please note that it only controls the border image of the table, not the cells.
Show only the top border <table frame=above>
Show only the bottom frame <table frame=below>
Show left and right frames only <table frame=vsides>
Show only top and bottom borders <table frame=hsides>
Show left border only <table frame=lhs>
Show right frame only <table frame=rhs>
Show no borders <table frame=void></td>
</tr>
</table>
</center>
</body>
</html>
関連
-
htmlでvue-routerを使用するためのサンプルコード
-
テーブルの適応とオーバーフローの設定詳細
-
ビューポートの基本原理と詳しい使い方
-
htmlでよく使われるエスケープ文字まとめ
-
今日、私は非常に奇妙なリ・ア・クリックの問題に遭遇し、自分自身で解決しました。
-
フラッシュビデオフォーマット（flv、swf）ファイルをhtmlファイルに埋め込む方法
-
htmlページ! --[IEの場合]...! [endif]--詳細を使用する
-
IEの死を偽装させることができるHTMLコード
-
WebページのレイアウトはIE6との互換性の問題を考慮する必要がある
-
iframeページ内で互いのjs関数を呼び出すためにjsを使用する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
タブ切り替えのためのhtmlサンプルコード
-
HTML要素] 画像を埋め込む方法
-
ウェブサイトでは、ページの内容や情報を直接コピーして解除することはできません。
-
HTMLエンベデッドWMP対応クローム、アイ書き込み方法詳細
-
ページ内ジャンプの手法を実現するためのタグのname属性とid属性
-
htmlに要素href URLリンクの自動更新または新しいウィンドウを開く機能実装
-
HTMLページ埋め込み動画、JSコントロールスイッチ動画例詳細
-
Web画像フォーマットPNG、JPG、GIFの選び方・使い方
-
HTML&CSS&JS互換ツリー（IE、Firefox、chrome）
-
htmlのブロックタグとインラインタグの違いについて