CODEWITHSUNDEEP
htmlcss
fulgen
fulgen

Reputation: 191

How to design HTML header

How to design this using html and css

enter image description here

Upvotes: 0

Views: 120

Answers (5)

Alex
Alex

Reputation: 457

<table>
    <tr>
        <th colspan="7">
        </th>
    </tr>
    <tr>
        <th>
        Column 1
        </th>
        <th>
        Column 2
        </th>
        <th>
        Column 3
        </th>
        <th>
        Column 4
        </th>
        <th>
        Column 5
        </th>
        <th>
        Column 6
        </th>
        <th>
        Column 7
        </th>
    </tr> </table>

Upvotes: 1

tarzanbappa
tarzanbappa

Reputation: 4958

<table width="100%">
    <tr>
        <td >header</td>
        <td > header</td>
        <td > header</td>
        <td > header</td>
        <td > header</td>
        <td valign="top">
        <table width="100%" >
            <tr>
                <td colspan="7">Main Header</td>
            </tr>
            <tr>
                <td>AUV</td>
                <td>4WM</td>
                <td>6WH</td>
                <td>PWD</td>
                <td>10WH</td>
                <td>20FT</td>
                <td>40FT</td>
            </tr>
        </table>

        </td>
        <td > header</td>
        <td > header</td>
    </tr>

    </table>

Upvotes: 1

Karuppiah RK
Karuppiah RK

Reputation: 3964

Fiddle

For this kind of header you need to use table and colspan. That is the better one. Now, here i've posted the same thing using div

HTML

#header
{
    background: #333333;
    color: #FFFFFF;
    width: 600px;
    height: 70px;
}
.th
{
    height: 35px;
    text-align: center;
    border-bottom: 1px solid #FFFFFF;
}
.td
{
    height: 35px;
    width: 100px;
    text-align: center;
    border-right: 1px solid #FFFFFF;
    display: table-cell;
}

CSS

    <div id="header">
      <div class="th">Single line</div>
      <div class="td">1st column</div>
      <div class="td">2nd column</div>
      <div class="td">3rd column</div>
      <div class="td">4th column</div>
      <div class="td">5th column</div>
      <div class="td">6th column</div>
    </div>

Upvotes: 2

Miguel Jim&#233;nez
Miguel Jim&#233;nez

Reputation: 1303

Use colspan. Example:

<table>
    <tr>
        <td colspan="4">A header</td>
    </tr>
    <tr>
        <td>Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
    </tr>
</table>

Upvotes: 3

Felix
Felix

Reputation: 38102

It's just a th inside table using colspan=7

<table border="1">
  <tr>
    <th colspan="7">This will span 7 columns</th>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <!-- Same for the rest here -->
</table>

Upvotes: 2

Related Questions