Использование <ul> для панели навигации вместо <table>

Я создаю веб-сайт с HTML и CSS для проекта в классе CS. Мне удалось создать навигационную панель с тегом <table>, но я слышал о плохой практике, так как, по-вашему, я могу преобразовать этот макет с помощью <ul>?

Схема следующая:

+-------------------------------------------------------------------------------+
|             | Company                                                         |
|  SITE LOGO  |                 Page 1  |  Page 2 |  Page 3 |  Page 4 |  Login  +
|             | Name                                                            |
+-------------------------------------------------------------------------------+

Вот разметка:

.nav {
    color:black;
    text-align:center;
    vertical-align:middle;
    border-collapse:collapse;
    width:100%;
}
<TABLE class = "nav">
      <TR style = "position:fixed; top:0; background-color:white; width:100%">
        <TD width = "77">
          <img src = "site_logo.png"style = "text-align:center; vertical-align:middle">
        </TD>
        <TD>
          <div style = "font-size:30; font-weight: bold; text-align:left;">
            Company
          </div>
          <div style = "font-size:18; text-align:left;">
            Name
          </div>
        </TD>
        <TD width = "20%">Page 1</TD>
        <TD width = "20%">Page 2</TD>
        <TD width = "20%">Page 3</TD>
        <TD width = "20%">Page 4</TD>
        <TD width = "20%">Login</TD>
        </TD>
      </TR>
    </TABLE>

Я пытался использовать <ul> вместо <table> самостоятельно, но мне не удалось сделать подзаголовок с названием компании в том же элементе <li> и выровнять все по вертикали.

🤔 А знаете ли вы, что...
HTML5 - последняя версия HTML, внедряющая новые элементы и функциональность, такие как <canvas> и <video>.


51
1

Ответ:

Решено

Вот как бы я создал эту навигацию. Ссылки распределяются равномерно, и я добавил максимальную ширину, чтобы сделать ее отзывчивой, и переместил логотип над ссылками, если доступного места становится мало, чтобы отображать все в одной строке. Если вы этого не хотите, удалите flex-wrap: wrap; и max-width: 600px;:

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

nav {
    color: black;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    background-color: #ccc;
    padding: 20px;
}

nav ul {
    display: flex;
    justify-content: space-around;
    width: 100%;
    max-width: 600px;
    list-style: none;
    padding: 10px;
}

nav a {
    text-decoration: none;
    color: inherit;
}

.brand_container {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Add this if you want the name to be below the image:
    flex-direction: column;
    */
    width: 200px;
}

.brand_container img {
    /* This is just to make sure it is visible in this example. The background-color can be deleted if an image is added */
    width: 50px;
    height: 50px;
    background-color: #f00;
    margin: 5px;
}
<nav>
    <div class = "brand_container">
        <img src = "site_logo.png" alt = "logo">
        <p>Company Name</p>
    </div>
    <ul>
        <li><a href = "#">Page 1</a></li>
        <li><a href = "#">Page 2</a></li>
        <li><a href = "#">Page 3</a></li>
        <li><a href = "#">Page 4</a></li>
        <li><a href = "#">Login</a></li>
    </ul>
</nav>