Блог

Главная - Вопросы по программированию - Почему теги в моем HTML-коде не отображаются по порядку в моем браузере?

Почему теги в моем HTML-коде не отображаются по порядку в моем браузере?

#html #css #html-table

#HTML #css #html-таблица

Вопрос:

Итак, я создаю веб-сайт в качестве теста. Код можно увидеть ниже.

 * {
    background: #000000;
    color: #dddddd;
    margin: 0;
    padding: 0;
}

body {
    font-family: Consolas;
}

button.header {
    border-width: 0;
}

table { width: 100%; }  
 <!DOCTYPE html>
<html lang="en">

    <head>
        <title>test title</title>
        <link rel="stylesheet" href="start.css">
    </head>

    <body>
        <table style="padding-top: 0.8rem;">
            <tr> <!-- Title, Buttons -->
                <th style="text-align: left; padding-left: 0.8rem;">
                    <h1>test site title</h1>
                </th>
                <th style="text-align: right; padding-right: 0.8rem;">
                   <button class="header"> ABOUT </button>
                   <button class="header"> PROJECTS </button>
                   <button class="header"> CONTACT </button>
                </th>
            </tr>
            <tr>
                Test
            </tr>
        </table>
    </body>
</html>

Результат показан ниже:
вывод браузера

Ошибка здесь в том, что второй <tr> тег с текстом "Test" отображается перед первым, который содержит кнопки и заголовок.

Почему это происходит? Как я могу повлиять на порядок строк моей таблицы?

Ответ №1:

Вы должны поместить либо a td , либо a th внутри a tr .

 <tr>
  <td>Test</td>
</tr>

тогда они будут отображаться в том же порядке, в котором вы их пишете.

Технические характеристики: https://html.spec.whatwg.org/multipage/tables.html#the-tr-element

Ответ №2:

Вам нужно обернуть «test» внутри элемента Data Cell ( <td> ) .

 * {
  background: #000000;
  color: #dddddd;
  margin: 0;
  padding: 0;
}

body {
  font-family: Consolas;
}

button.header {
  border-width: 0;
}

table {
  width: 100%;
}  
 <table style="padding-top: 0.8rem;">
  <tr>
    <th style="text-align: left; padding-left: 0.8rem;">
      <h1>test site title</h1>
    </th>
    <th style="text-align: right; padding-right: 0.8rem;">
      <button class="header"> ABOUT </button>
      <button class="header"> PROJECTS </button>
      <button class="header"> CONTACT </button>
    </th>
  </tr>
  <tr><td>Test</td></tr>
</table>