ヘッダ内の複数のテーブルヘッダ

私のHTMLテーブルには、独自のテーブル行を持つ3つのサブヘッダを含む特別なヘッダがあります。私はrowspanとcolspanを使ってそれを達成しようとしましたが、間に迷っています。私はHTMLテーブルを使用して達成しようとしていることを説明するために最善を尽くします。ヘッダ内の複数のテーブルヘッダ

/-------------------------------------------------------------\ 
|   |    Two    |   |   | 
| One  |------------------------------| Three | Four | 
|   | Two A | Two B | Two C |   |   | 
|-----------------------------------------|---------|---------| 
| 1.0  | 20.00 | 40.00 | 52.00 | 45 | 62 | 
|-----------------------------------------|---------|---------| 
| 2.0  | 60.00 | 70.00 | 84.00 | 54 | 45 | 
\-------------------------------------------------------------/

これはHTMLテーブルのみを使用して行うことができますか、それとも他の方法を使用する必要がありますか？

出典

2017-04-12 Kevin S

-1

これはあなたが探しているものですか？ IFの場合は、テーブルのヘッダにテーブルをネストする必要があります。ここで

<table> 
 
<tr> 
 
<th>1</th><th colspan="2">MAIN<table><tr><td>2</td><td>3</td></tr></table></th><th>4</th> 
 
</tr> 
 
<tr> 
 
<td>1</td><td>2</td><td>3</td><td>4</td> 
 
</tr> 
 
<tr> 
 
<td>1</td><td>2</td><td>3</td><td>4</td> 
 
</tr> 
 
<tr> 
 
<td>1</td><td>2</td><td>3</td><td>4</td> 
 
</tr> 
 
<tr> 
 
<td>1</td><td>2</td><td>3</td><td>4</td> 
 
</tr> 
 
</table>

出典

2017-04-12 20:32:03 Cam

だけROWSPANとCOLSPAN

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
     table, 
 
     th, 
 
     td { 
 
      border: 1px solid black; 
 
      border-collapse: collapse; 
 
     } 
 
     
 
     th, 
 
     td { 
 
      padding: 5px; 
 
      text-align: center; 
 
     } 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <table style="width:100%"> 
 
     <tr> 
 
      <th rowspan="2">One</th> 
 
      <th colspan="3">Two</th> 
 
      <th rowspan="2">Three</th> 
 
      <th rowspan="2">Four</th> 
 
     </tr> 
 
     <tr> 
 
      <th>Two A</th> 
 
      <th>Two B</th> 
 
      <th>Two C</th> 
 
     </tr> 
 
     <tr> 
 
      <td>1.0</td><td>10.00</td><td>40.00</td><td>52.00</td><td>40</td><td>62</td> 
 
     </tr> 
 
     <tr> 
 
      <td>2.0</td><td>60.00</td><td>70.00</td><td>84.0</td><td>54</td><td>45</td> 
 
     </tr> 
 
    </table> 
 

 
</body> 
 

 
</html>

を持つ別のソリューションです

出典

2017-04-12 20:59:41

ヘッダ内の複数のテーブルヘッダ

答えて

関連する問題