テーブルに複数の水平線をhtmlで配置する方法は？

初めてパブリケーションで使用される可能性のある素敵なテーブルを生成するために、htmlを初めて使用しています。 <hr>という問題があります。私がするたびに、それは図の上に線を置きます（下図参照）。私はそこで線が欲しいのですが、大胆な言葉の下、成長率とバイオマスの間の隙間を完全に横切る線も好きです（これは基本的に2つの属を分ける）。そのない多くの仕事に場合テーブルに複数の水平線をhtmlで配置する方法は？

さらに、私はまた、（すなわち、モデルバイオマスの最後の可変密度と褐虫藻あたりモデルクロロフィル上の第一の可変密度の）各モデルを区切る水平線たいです。しかし、私はモデルで水平線を止めたい。

これは意味があり、私は自分のコードを以下にリンクしています（私は書式が悪いと知っています！）。

ありがとうございます！

<html> 
 
    <table border=1> 
 
    <table width="100%"> 
 
    
 
    <tr> 
 
     <td><b>Genus</b></td> 
 
     <td><b>Model</b></td> 
 
     <td><b>Variable</b></td> 
 
     <td><b>Importance</b></td> 
 
     <td><b>Fit</b></td> 
 
    </tr> 
 
    <br> 
 
    <hr> 
 

 

 
    
 
    <tr> 
 
     <td rowspan="28"><i>Orbicella spp.</i></td> 
 
     <td rowspan="7">Biomass</td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td>Density</td> 
 
     <td>51.3</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Chl_zoox</td> 
 
     <td>20</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
     <td>0.52</td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
     <tr> 
 
     <td rowspan="7">Chlorophyll per <i>Symbiodinium</i></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
     <tr> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
    
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
     <td>0.52</td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
     <tr> 
 
     <td rowspan="7"><i>Symbiodinium</i> Density</td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
     <tr> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
    
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
     <td>0.52</td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
     <tr> 
 
     <td rowspan="7">Growth Rate</td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
     <tr> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
    
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
     <td>0.52</td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
    <tr> 
 
     <td rowspan="23"><i>Acropora spp.</i></td> 
 
     <td rowspan="9">Biomass</td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
     <tr> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
     <tr> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
     <tr> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>51.3</td> 
 
     <td></td> 
 
    </tr> 
 

 
    <tr> 
 
     <td>Chl_zoox</td> 
 
     <td>20</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
     <td>0.52</td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
     <tr> 
 
     <td rowspan="7">Chlorophyll per <i>Symbiodinium</i></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
     <tr> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
    
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
     <td>0.52</td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
    </tr> 
 
     <tr> 
 
     <td rowspan="7"><i>Symbiodinium</i> Density</td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
     <tr> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
    
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
     <td>0.52</td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 
     <tr> 
 
     <td>Density</td> 
 
     <td>10</td> 
 
    </tr> 
 

 
    </table> 
 
     </html>

出典

2016-11-17 Danib90

それをあなたが空のセルを使用する必要はありません。 –

@ReneLimon空のセルはどういう意味ですか？ – Danib90

人事要素がここに移動する方法はありません。あなたのテーブルに罫線を使用するほうがはるかに簡単で、きれいです。

CSS

table{ 
    border-collapse: collapse; //collapse all borders so they don't double up 
    border:1px solid #000; //add border around entire table 

} 



tr{ 
    border-top:1px solid #000; //add single line to top of each row 
    border-bottom:1px solid #000; //add single line to bottom of each row 
}

あなたは、外部CSSを使用していない場合は、このインラインを行うことができます - しかし、あなたは、このように各テーブル行にTRのスタイルを追加する必要があります：

<tr style="border-top:1px solid #000;border-bottom:1px solid #000;">

出典

2016-11-17 23:42:54 Korgrue

は、これを別の行として追加するか、すでに存在する ''の中に追加するのですか？ 'を少し入れ替えてください。 – Danib90

これをインラインで実行している場合は、既存のtrに追加します。私はしかし、可能であればCSSを使用することをお勧めします。 CSSをドキュメントの上部に貼り付けることさえ可能です。ちょうど – Korgrue

ありがとう！ – Danib90

私はあなたのスクリプトを見て、<table>を2回宣言したことに気付きました。 2人のうち最初の人はボーダーを持っています。私は一度だけ、テーブルを宣言し、同様に両方の引数を組み合わせること（必要な）お勧め：<table width='100%' border='1'>

セカンドpossibilatyが<TD>内<HR>を囲むことです。のように：第三の選択肢はindividaly

幸運:-)私の上の回答のように、各CELの境界線（上、左rigth、下）を割り当てるためにスタイルを使用している<tr><td colspan='7'><hr></td></tr>

出典

2016-11-17 23:50:59 jdkos

最初の可能性は、 "セル"の周りに罫線を追加します。私はちょうど上の水平線を言及したい。 2番目のものはほぼ成功しましたが、いくつかのラインにはブレークがあります。 – Danib90

テーブルに複数の水平線をhtmlで配置する方法は？

答えて

関連する問題