HTML：colspanとrowspanの使い方は？

私は非常に単純な配列を構築しようとしていますが、どういうわけかそれは動作しません。次に例を示します。HTML：colspanとrowspanの使い方は？

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
table, th, td { 
 
    border: 1px solid black; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<table width=100%> 
 
    <tr> 
 
    <th colspan="8">sigle row of 8 cols</th> 
 
    </tr> 
 
    <tr > 
 
    <td colspan="2">2 cols </td> 
 
    <td rowspan="3" colspan="6" > 6 cols</td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="2">2 cols</td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="2">2 cols</td> 
 
    </tr> 
 
</table> 
 

 
</body> 
 
</html>

デバッグに私を助けてください。私は、2つの列だけを占有し、6つの列（残りの部分）を占めるために保存することを希望しますが、これは期待どおりに機能しません。私は答えが自明だが、私はそれを見つけることができません。何が間違っているのか教えていただけますか？あなたがheading in single <th>を追加するので、異なるIDが

<th colspan="2">Monthly</th> 
<th colspan="6">Savings</th>

ので、それが表示されます作るため

出典

2017-10-31 dmx

6 for savingテーブルは8列がありますが、あなたは持っています効果的に2に減らしました。テーブルレンダリングアルゴリズムは、可能な限り効率的です。

追加の行を追加することによって、あなたは何が起こっているのかを見ることができます

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
table, th, td { 
 
    border: 1px solid black; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<table width=100%> 
 
    <tr> 
 
    <th colspan="8">Monthly Savings</th> 
 
    </tr> 
 
    <tr > 
 
    <td colspan="2">January</td> 
 
    <td rowspan="3" colspan="6" >$30000</td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="2">February</td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="2">March</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>3</td> 
 
    <td>4</td> 
 
    <td>5</td> 
 
    <td>6</td> 
 
    <td>7</td> 
 
    <td>8</td> 
 
    </tr> 
 
</table> 
 

 
</body> 
 
</html>

あなたは列に幅を割り当てるされてやったほうが良いとは何

table, th, td { 
 
    border: 1px solid black; 
 
}

<table width=100%> 
 
    <tr> 
 
    <th colspan="2">Monthly Savings</th> 
 
    </tr> 
 
    <tr > 
 
    <td style="width:33%">January</td> 
 
    <td rowspan="3" style="width:66%" >$30000</td> 
 
    </tr> 
 
    <tr> 
 
    <td>February</td> 
 
    </tr> 
 
    <tr> 
 
    <td>March</td> 
 
    </tr> 
 
</table>

出典

2017-10-31 06:41:02

はい、これは私が望む方法ですが、最初のセルの幅は2/8で、2番目のセルは6/8でなければなりません – dmx

最初のセルが2/8（= 1/4）と2番目のセル1つは6/8（= 3/4）で、次に幅を25％と75％に設定し、これを達成するために（ヘッダーとは別に）列スパンを使用しないでください。 – Calaris

2 for monthと

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
    table, 
 
    th, 
 
    td { 
 
     border: 1px solid black; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <table width=100%> 
 
    <tr> 
 
     <th colspan="2">Monthly</th> 
 
     <th colspan="6">Savings</th> 
 
    </tr> 
 
    <tr> 
 
     <td colspan="2">January</td> 
 
     <td rowspan="3" colspan="6">$30000</td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan="2">February</td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan="2">March</td> 
 
    </tr> 
 
    </table> 
 

 
</body> 
 

 
</html>

出典

2017-10-31 06:37:03 Bhargav

ありがとう、私はヘッダー上の単一の行が欲しいです。このデータはデモ用です。 – dmx

HTML：colspanとrowspanの使い方は？

答えて

関連する問題