Html在表头之前多次打印标题

时间：2017-05-28 16:27:51

标签： javascript jquery html css

以下是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>

2 个答案:

答案 0 :(得分：1)

您尚未关闭表格标记 您应该在标题之前打开表标记，然后在所有tr标记之后关闭它，然后打开其他表

＆＃13;
＆＃13; 
th{
width:150px;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

更新：使用css为所有列的相同宽度设置大小

答案 1 :(得分：0)

你有很多HTML错误，但最大的问题是你似乎有3个表，但是没有关闭前两个表，这导致一个表有3个字幕。

您有几个空的tr元素。

您已省略了文档的head部分。

您在使用align属性的CSS中也有错误，并且应该只使用margin:0;（您已经拥有）：

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

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题