テーブルヘッダーの前に複数回キャプションを印刷するためのHTML

-2

以下はhtmlコードです。私はhtmlに非常に新しいです。私は表のヘッダーの前にキャプションを印刷するのを助ける必要があります。すべてのキャプションは下のコードの一番上に印刷されています。助けてくださいテーブルヘッダーの前に複数回キャプションを印刷するためのHTML

私は印刷キャプションが必要ですQACheck： - NIC1その後、テーブルヘッダー、再びキャプションQACheck： - NIC2テーブルヘッダーなど。

私はキャプションがScott Marcusから推奨されなくなったことを知りに来ました。

必要なものテーブルのヘッダーの前に入力が必要ですこの場合のテーブルの説明QACheck： - NIC1、QACheck： - NIC2、QACheck： - NIC3はテーブルの説明です。

詳細情報が必要な場合は教えてください。

 <!DOCTYPE html> 
     <html> 

     <style> 
     p { 
      font-family : Calibri; 
      font-size: 14px; 
      font-weight: bolder; 
      text-align : left; 
     } 

     p.fade { 
      color : #CCCCCC; 
      font-size: 14px; 
     } 
     em { 
      font-style : italic ; 
      font-size : 16px; 
      font-weight: lighter ; 
     } 
     em.pass { 
      font-style : italic ; 
      font-size : 16px; 
      color: green ; 
     } 
     em.fail { 
      font-style : italic ; 
      font-size : 16px; 
      color: red ; 
     } 

     a { 
      text-decoration: none; 
     } 
     a:hover { 
      text-decoration: underline; 
     } 

     hr { 
      align: left ; 
      margin-left: 0px ; 
      width: 500px; 
      height:1px; 
     } 

     table { 
      border-collapse: collapse; 
     } 

     tr { 
      padding: 4px; 
      text-align: center; 
      border-right:2px solid #FFFFFF; 
     } 

     tr:nth-child(even){background-color: #f2f2f2} 

     th { 
      background-color: #cceeff; 
      color: black; 
      padding: 4px; 
      border-right:2px solid #FFFFFF; 
     } 


     </style> 

     <body> 
      <table> 
<caption>QACheck:- NIC1</caption> 
<tr> 
<th>Parameters</th> 
<th> Output</th> 
<th> QACheck_Status</th> 
<th> Reason</th> 
</tr> 
<tr> 
<td>Device</td> 
<td> Alias</td> 
<td> ok</td> 
<td> NOthing</td> 
</tr> 
<tr> 
<td>Game</td> 
<td> CriKet</td> 
<td style='color:red'> Failed</td> 
<td> "Not Played well"</td> 
</tr> 
<tr> 
</tr> 

<caption>QACheck:- NIC2</caption> 
<tr> 
</tr> 
<tr> 
<th>Parameters</th> 
<th> Output</th> 
<th> QACheck_Status</th> 
<th> Reason</th> 
</tr> 
<tr> 

<tr> 
<td>Device</td> 
<td> Alias</td> 
<td> ok</td> 
<td> NOthing</td> 
</tr> 
<tr> 
<td>Game</td> 
<td> CriKet</td> 
<td style='color:red'> Failed</td> 
<td> "Not Played well"</td> 
</tr> 
<tr> 
</tr> 
<caption>QACheck:- NIC3</caption> 
<tr> 
</tr> 
<tr> 
<th>Parameters</th> 
<th> Output</th> 
<th> QACheck_Status</th> 
<th> Reason</th> 
</tr> 
<tr> 
<td>Device</td> 
<td> Alias</td> 
<td> ok</td> 
<td> NOthing</td> 
</tr> 
<tr> 
<td>Game</td> 
<td> CriKet</td> 
<td> Pass</td> 
<td> "NA"</td> 
</tr> 
<tr> 
</tr> 
</table> 

     </body> 
    </html>

出典

2017-05-28 kitty

私は投票だ：

はまた、あなたがalignプロパティを使用してのみmargin:0;（あなたがすでに持っていた）を使用している必要がありますあなたのCSSのエラーを持っていますあなたのHTMLが全体的に無効であり、この質問に適切に答えるための修正が必要なため、この質問をトピックとして閉じます。 – Rob

あなたは閉じ、テーブルタグ を持っていないあなたは、キャプションの前にテーブルタグを開き、すべてのtrタグの後にそれを閉じた後、

th{ 
 
width:150px; 
 
}

<!DOCTYPE html> 
 
     <html> 
 

 
     <style> 
 
     p { 
 
      font-family : Calibri; 
 
      font-size: 14px; 
 
      font-weight: bolder; 
 
      text-align : left; 
 
     } 
 

 
     p.fade { 
 
      color : #CCCCCC; 
 
      font-size: 14px; 
 
     } 
 
     em { 
 
      font-style : italic ; 
 
      font-size : 16px; 
 
      font-weight: lighter ; 
 
     } 
 
     em.pass { 
 
      font-style : italic ; 
 
      font-size : 16px; 
 
      color: green ; 
 
     } 
 
     em.fail { 
 
      font-style : italic ; 
 
      font-size : 16px; 
 
      color: red ; 
 
     } 
 

 
     a { 
 
      text-decoration: none; 
 
     } 
 
     a:hover { 
 
      text-decoration: underline; 
 
     } 
 

 
     hr { 
 
      align: left ; 
 
      margin-left: 0px ; 
 
      width: 500px; 
 
      height:1px; 
 
     } 
 

 
     table { 
 
      border-collapse: collapse; 
 
     } 
 

 
     tr { 
 
      padding: 4px; 
 
      text-align: center; 
 
      border-right:2px solid #FFFFFF; 
 
     } 
 

 
     tr:nth-child(even){background-color: #f2f2f2} 
 

 
     th { 
 
      background-color: #cceeff; 
 
      color: black; 
 
      padding: 4px; 
 
      border-right:2px solid #FFFFFF; 
 
     } 
 

 

 
     </style> 
 

 
     <body> 
 
      <table> 
 
<caption>QACheck:- NIC1</caption> 
 
<tr> 
 
<th>Parameters</th> 
 
<th> Output</th> 
 
<th> QACheck_Status</th> 
 
<th> Reason</th> 
 
</tr> 
 
<tr> 
 
<td>Device</td> 
 
<td> Alias</td> 
 
<td> ok</td> 
 
<td> NOthing</td> 
 
</tr> 
 
<tr> 
 
<td>Game</td> 
 
<td> CriKet</td> 
 
<td style='color:red'> Failed</td> 
 
<td> "Not Played well"</td> 
 
</tr> 
 
<tr> 
 
</tr> 
 
</table> 
 
<table> 
 

 
<caption>QACheck:- NIC2</caption> 
 
<tr> 
 
</tr> 
 
<tr> 
 
<th>Parameters</th> 
 
<th> Output</th> 
 
<th> QACheck_Status</th> 
 
<th> Reason</th> 
 
</tr> 
 
<tr> 
 

 
<tr> 
 
<td>Device</td> 
 
<td> Alias</td> 
 
<td> ok</td> 
 
<td> NOthing</td> 
 
</tr> 
 
<tr> 
 
<td>Game</td> 
 
<td> CriKet</td> 
 
<td style='color:red'> Failed</td> 
 
<td> "Not Played well"</td> 
 
</tr> 
 
<tr> 
 
</tr> 
 
</table><table> 
 
<caption>QACheck:- NIC3</caption> 
 
<tr> 
 
</tr> 
 
<tr> 
 
<th>Parameters</th> 
 
<th> Output</th> 
 
<th> QACheck_Status</th> 
 
<th> Reason</th> 
 
</tr> 
 
<tr> 
 
<td>Device</td> 
 
<td> Alias</td> 
 
<td> ok</td> 
 
<td> NOthing</td> 
 
</tr> 
 
<tr> 
 
<td>Game</td> 
 
<td> CriKet</td> 
 
<td> Pass</td> 
 
<td> "NA"</td> 
 
</tr> 
 
<tr> 
 
</tr> 
 
</table> 
 

 
     </body> 
 
    </html>

他のテーブルを開く必要があります

更新：すべての列の同じ幅のサイズを設定するためにCSSを使用

出典

2017-05-28 16:33:31

食料品が変化しています。私はすべての行に同じ幅が必要です – kitty

@kitty私は私の答えを更新しました今すぐ確認してください。それがあなたを助けたら答えを受け入れる –

多くのHTMLエラーがありますが、最大のものは3つの表があるようですが、最初の2つは閉じていないため、1つの表に3つのキャプションが付いています。

いくつかの空の要素があります。tr

文書のheadセクションを省略しました。

hr { 
     /* you had align:left; */ 
     margin-left: 0px ; 
     width: 500px; 
     height:1px; 
    }

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
     <style> 
 
     p { 
 
      font-family : Calibri; 
 
      font-size: 14px; 
 
      font-weight: bolder; 
 
      text-align : left; 
 
     } 
 

 
     p.fade { 
 
      color : #CCCCCC; 
 
      font-size: 14px; 
 
     } 
 
     em { 
 
      font-style : italic ; 
 
      font-size : 16px; 
 
      font-weight: lighter ; 
 
     } 
 
     em.pass { 
 
      font-style : italic ; 
 
      font-size : 16px; 
 
      color: green ; 
 
     } 
 
     em.fail { 
 
      font-style : italic ; 
 
      font-size : 16px; 
 
      color: red ; 
 
     } 
 

 
     a { 
 
      text-decoration: none; 
 
     } 
 
     a:hover { 
 
      text-decoration: underline; 
 
     } 
 

 
     hr { 
 
      text-align: left; 
 
      margin-left: 0px ; 
 
      width: 500px; 
 
      height:1px; 
 
     } 
 

 
     table { 
 
      border-collapse: collapse; 
 
     } 
 

 
     tr { 
 
      padding: 4px; 
 
      text-align: center; 
 
      border-right:2px solid #FFFFFF; 
 
     } 
 

 
     tr:nth-child(even){background-color: #f2f2f2} 
 

 
     th { 
 
      background-color: #cceeff; 
 
      color: black; 
 
      padding: 4px; 
 
      border-right:2px solid #FFFFFF; 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 

 
    <table> 
 
    <caption>QACheck:- NIC1</caption> 
 
    <tr> 
 
     <th>Parameters</th> 
 
     <th> Output</th> 
 
     <th> QACheck_Status</th> 
 
     <th> Reason</th> 
 
    </tr> 
 
    <tr> 
 
     <td>Device</td> 
 
     <td> Alias</td> 
 
     <td> ok</td> 
 
     <td> NOthing</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Game</td> 
 
     <td> CriKet</td> 
 
     <td style='color:red'> Failed</td> 
 
     <td> "Not Played well"</td> 
 
    </tr> 
 
    <tr> 
 
    </tr> 
 
    </table> 
 
    
 

 
    <table> 
 
    <caption>QACheck:- NIC2</caption> 
 
    <tr> 
 
    </tr> 
 
    <tr> 
 
     <th>Parameters</th> 
 
     <th> Output</th> 
 
     <th> QACheck_Status</th> 
 
     <th> Reason</th> 
 
    </tr> 
 
    <tr> 
 

 
    <tr> 
 
     <td>Device</td> 
 
     <td> Alias</td> 
 
     <td> ok</td> 
 
     <td> NOthing</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Game</td> 
 
     <td> CriKet</td> 
 
     <td style='color:red'> Failed</td> 
 
     <td> "Not Played well"</td> 
 
    </tr> 
 
    <tr> 
 
    </tr> 
 
    </table> 
 

 

 

 

 
    <table> 
 
    <caption>QACheck:- NIC3</caption> 
 
    <tr> 
 
    </tr> 
 
    <tr> 
 
     <th>Parameters</th> 
 
     <th> Output</th> 
 
     <th> QACheck_Status</th> 
 
     <th> Reason</th> 
 
    </tr> 
 
    <tr> 
 
     <td>Device</td> 
 
     <td> Alias</td> 
 
     <td> ok</td> 
 
     <td> NOthing</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Game</td> 
 
     <td> CriKet</td> 
 
     <td> Pass</td> 
 
     <td> "NA"</td> 
 
    </tr> 
 
    <tr> 
 
    </tr> 
 
    </table> 
 

 

 

 
</body> 
 
</html>

出典

2017-05-28 16:40:20

先生、上記のコードでそれを使うにはどうすればよいですか？ – kitty

「」は推奨されていません：https://developers.whatwg.org/tabular-data.html#the-caption-elementあなたのリンクは非難されていることについて何も言及していません。 – Rob

@kitty私の更新された回答を参照してください。 –

テーブルヘッダーの前に複数回キャプションを印刷するためのHTML

答えて

関連する問題