Ниже приведен HTML-код. Я очень плохо знаком с html. Мне нужно помочь напечатать заголовок перед заголовком таблицы. Все подписи печатаются вверху кода ниже. Пожалуйста помоги

Мне нужно напечатать заголовок QACheck: - NIC1 Затем заголовок таблицы, снова заголовок QACheck: - NIC2 заголовок таблицы и так далее.

Я узнал, что подпись устарела от Скотта Маркуса в комментариях ниже.

То, что мне нужно, перед заголовком таблицы мне нужно положить Описание таблицы в этом случае 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
kitty 28 Май 2017 в 19:27

2 ответа

Лучший ответ

Вы не закрыли тег таблицы Вы должны открыть тег таблицы перед заголовком и закрыть его после всех тегов 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, чтобы установить размер для одинаковой ширины всех столбцов

1
Dinesh undefined 28 Май 2017 в 16:51

У вас много ошибок HTML, но самая большая из них состоит в том, что у вас, кажется, есть 3 таблицы, но первые две из них не закрыты, в результате чего у одной таблицы есть 3 заголовка.

У вас есть несколько пустых tr элементов.

Вы пропустили раздел head документа.

У вас также есть ошибка в вашем CSS, когда вы использовали свойство align и должны были использовать только margin:0; (который у вас уже был):

  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>
0
Scott Marcus 28 Май 2017 в 17:05