HTML テーブル境界コントロールの詳細な説明

上の境界線のみを表示する <table frame=above>
下の境界線のみを表示する <table frame=below>
左と右の境界線のみを表示する <table frame=vsides>
上と下の境界線のみを表示します <table frame=hsides>
左の境界線のみを表示する <table frame=lhs>
右の境界線のみを表示する <table frame=rhs>
境界線を表示しない <table frame=void>

コードをコピー

コードは次のとおりです。

<html>
<ヘッド>
<title>表の境界線を非表示</title>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8">
<スタイルタイプ="text/css">
本文 { 色:"#ffffff";
フォントファミリー: "宋体";
フォントサイズ: 12px;
上マージン: 4;
}
.t {
境界線: #000000; 境界線スタイル: solid; 境界線幅: 1px
}
td {
フォントファミリ: "Tahoma"、"MS Shell Dlg"、フォントサイズ: 12px
}
テキストエリア {境界線: 1 実線 #000000"}
</スタイル>
</head>
<body bgcolor="#999999" テキスト="#000000">
<中央>
<テーブルの幅="600" 境界線="0" セル間隔="0" セルパディング="8" クラス="t">
<tr>
<td>
<表の境界線="1" 幅="200" セルパディング="0" セル間隔="0">
<tr align="center">
<td>公開</td>
<td>表</td>
</tr>
<tr align="center">
<td>合格</td>
<td>グリッド</td>
</tr>
</テーブル>
</td>
<td>これは通常のテーブルです</td>
</tr>
<tr>
<td>

<テーブルの幅="200" 境界線="1" セル間隔="0" セルパディング="0" フレーム=上>
<tr align="center">
<td>頭</td>
<td>トップ</td>
</tr>
<tr align="center">
<td>はい</td>
<td>日</td>
</tr>
</テーブル>

</td>
<td>上の境界線のみ表示</td>
</tr>
<tr>
<td>
<テーブルの幅="200" 境界線="1" セル間隔="0" セルパディング="0" フレーム=下>
<tr>
<td align="center">足</td>
<td align="center">次へ</td>
</tr>
<tr>
<td align="center">はい</td>
<td align="center">地面</td>
</tr>
</テーブル>
</td>
<td>下の境界線のみを表示する</td>
</tr>
<tr>
<td>

<テーブル幅="200" 境界線="1" セル間隔="0" セルパディング="0" フレーム=vsides>
<tr>
<td align="center">空に届く方法はありません</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td align="center">地面に触れない</td>
</tr>
</テーブル>

</td>
<td>左と右の境界線のみを表示する</td>
</tr>
<tr>
<td>
<表の境界線="1" セル間隔="0" セルパディング="0" フレーム=hsides width="200">
<tr>
<td align="center">両側を削除します</td>
<td></td>
</tr>
<tr>
<td></td>
<td align="center">「王」という文字だけが残ります</td>
</tr>
</テーブル>
</td>
<td>上と下の境界線のみを表示する</td>
</tr>
<tr>
<td>

<テーブルの幅="200" 境界線="1" セル間隔="0" セルパディング="0" フレーム=lhs>
<tr>
<td width="100" align="center">のみ</td>
<td width="100" align="center">はい</td>
</tr>
<tr>
<td align="center">左</td>
<td align="center">サイド</td>
</tr>
</テーブル>

</td>
<td>左の境界線のみを表示する</td>
</tr>
<tr>
<td>
<テーブルの幅="200" 境界線="1" セル間隔="0" セルパディング="0" フレーム=rhs>
<tr>
<td width="100" align="center">のみ</td>
<td width="100" align="center">はい</td>
</tr>
<tr>
<td align="center">右</td>
<td align="center">サイド</td>
</tr>
</テーブル>
</td>
<td>右の境界線のみを表示する</td>
</tr>
<tr>
<td>

<テーブルの幅="200" 境界線="1" セル間隔="0" セルパディング="0" フレーム=void>
<tr>
<td align="center">周辺</td>
<td align="center">削除</td>
</tr>
<tr>
<td align="center">のみ</td>
<td align="center">中央</td>
</tr>
</テーブル>
</td>
<td>境界線を表示しない</td>
</tr>
<tr>
<td colspan="2">
<hr size="1" color=黒>
テーブル境界線の表示と非表示は、frame パラメータによって制御できます。これはテーブルの境界線の画像のみを制御し、セルには影響しないことに注意してください。

上の境界線のみを表示します <table frame=above>

下の境界線のみを表示します <table frame=below>

左と右の境界線のみを表示します <table frame=vsides>

上部と下部の境界線のみを表示します <table frame=hsides>

左の境界線のみを表示します <table frame=lhs>

右の境界線のみを表示します <table frame=rhs>

境界線を表示しない<table frame=void></td>
</tr>
</テーブル>
</center>
</本文>
</html>

<<: 熟練デザイナーの7つの原則（2）：色の使い方

>>: CSS リセットスタイルリセットの実装例