What is the name of this bar? [HTML]

Question

Good morning, someone knows what this type of bar is called (red bar on the page below), or the name of the effect applied to it ?

http://arrobba.inf.br/produtos_nfe.htm

Answer 1

This bar was made with a <table>. In fact if you give a Ctrl+U on this page you will see that it was all done with table, which is a very outdated technique to assemble layouts and nothing responsive!

Here is the bar code:

.produtos-relacao {
    font-family: Calibri;
    font-size: 18px;
    color: #FFFFFF;
    font-weight: bold;
    background-color: #EC3237;
    text-align: center;
    border: 1px solid #6A6F75;
    margin: 5px;
    padding: 5px;
}

<table width="100%" border="0" cellpadding="0" cellspacing="0" class="produtos-relacao">
    <tbody>
        <tr>
            <td width="20%"><a href="produtos_lojas.htm">@Lojas</a></td>
            <td width="20%"><a href="produtos_hotel.htm">@Hotel</a></td>
            <td width="20%"><a href="produtos_nfe.htm">@NFe</a></td>
            <td width="20%"><a href="produtos_sped.htm">@SPED</a></td>
        </tr>
    </tbody>
</table>

---

TIP:

Do not use table to make layouts, tables are for tabular data. To make layouts use semantic tags like main, nav, section etc....

Start by studying for these links, they will help you better understand the basics! https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout and here too https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction After studying them you can look for other frameworks of Bootstrap and Materialize type Design Systems for example.