Create a header using html codes html table and css for your website or blog

Lean how you can create a stylish header for your websites or blogs. We use html and css codes to create headers. These headers are responsove and good to look.

What is header in your website ?

A header in your websites or blogs is a container that is used on the top of the webpages. A header can contain your website logo, links, or sidepanel and etc.
You can create beautiful and responsive headers using html and css. We use to align items using html table, left, center and right.

Lets create a simple and responsive header with html table and styling with css.

HTML and CSS

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/> <style> .header-wrapper-first {width:96%; padding:2%; background-color: green;} .header-wrapper-first table {width:100%; text-align: center; color:white; font-size:20px;} </style> <div class="header-wrapper-first"> <table> <tr> <td> <i class="fa fa-bars"></i> </td> <td> Website.com </td> <td> fa fa-home </td> </tr> </table> </div>

Output

Website.com

Changing header background colors.

Website.com
Website.com
Website.com

How to change header background color

To apply different colors to header background, we use css background-color property. See below how you use it.

1

<style>
.header-wrapper-first{background-color: green;}
</style>

2

<style>
.header-wrapper-second{background-color:#f8f8f8;}
</style>

3

<style>
.header-wrapper-third{background-color:#6698ff;}
</style>

4

<style>
.header-wrapper-fourth{background-color: purple;}
</style>
Just apply the the color in the given css code as you want. Header background-color will be changed.

Creating a animated header using html and css code.

Let's see how you can create a animated header changing it's background colors.
Website.com

HTML and CSS

<style> .header-wrapper-animated {width:96%; padding:2%; background-color: green; animation: animation-background 5s infinite; } @keyframes animation-background { from {background-color: green;} to {background-color:purple;} } .header-wrapper-animated table {width:100%; color:white; font-size:20px; text-align: center;} </style> <div class="header-wrapper-animated"> <table> <tr> <td> <i class="fa fa-bars"></i> </td> <td> Website.com </td> <td> <i class="fa fa-home"></i> </td> </tr> </table> </div>