Three row header : th « Tags « HTML / CSS






  1. HTML / CSS
  2. Tags
  3. th

Three row header

     

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
  margin: 10px 40px;
  padding: 0;
  text-align: center;
  font-size: 62.5%;
}

#wrapper {
  text-align: left;
  border: 1px solid #033;
  position: relative;
  font-size: 1.4em;
}

#header {
  background: #033;
  color: #fff;
  height: 55px;
  position: relative;
}

#header h1,#header h2 {
  position: absolute;
  padding: 0;
  margin: 0;
}

#header h1 {
  top: 5px;
  left: 8px;
  height: 50px;
}

#header h2 {
  top: 20px;
  left: 193px;
}

#headerlinks {
  float: right;
  font-size: 0.8em;
  padding: 6px 6px 8px 10px;
}

#headerlinks a:link,#headerlinks a:visited,#headerlinks a:hover,#headerlinks a:active{
  color: #fff;
}

#headersearch form {
  padding: 0;
  margin: 0;
}

#headersearch {
  position: absolute;
  top: 2em;
  right: 5px;
}

#headersearch form input {
  padding: 0;
  margin: 0;
  vertical-align: middle;
}

#txtSearch {
  height: 17px;
  width: 115px;
  border: 1px solid black;
}

#tablinks {
  background: #336868;
}

#tablinks div {
  float: left;
  border-right: 1px solid #094747;
}

#tablinks a {
  display: block;
  padding: 5px 10px;
}

#tablinks a:link,#tablinks a:visited,#tablinks a:hover,#tablinks a:active
  {
  color: white;
  text-decoration: none;
}

#tablinks a.current {
  background: #047070;
}

#breadcrumb {
  background: #009f9f;
  color: #fff;
  padding: 5px 10px;
}

#breadcrumb a {
  color: #fff;
}

#breadcrumb ul,#breadcrumb li {
  display: inline;
  padding: 0;
  margin: 0;
}

#breadcrumb ul li {
  padding-left: 0;
}

#breadcrumb ul li ul li {
  padding-left: 14px;
}

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix {
  display: inline-table;
}

</style>
</head>

<body id="cols3">
<div id="wrapper">
 <div id="header">
 <h1>header 1</h1>
 <h2>header 2</h2>
 <div id="headerlinks">
     <a href="">Contact Us</a> | 
     <a href="">Site Map</a> | 
     <a href="">Store Locator</a></div>
 <div id="headersearch">
     <form>
        <input type="text" name="txtSearch" id="txtSearch" /> 
        <input type="image" src="searchbutton.gif" alt="Search" /></form></div>
 </div>
 
 <div id="tablinks" class="clearfix">
 <div><a href="">Home</a></div>
 <div><a href="" class="current">Travel</a></div>
 <div><a href="">Flights</a></div>
 <div><a href="">Hotels</a></div>
 <div><a href="">Late Deals</a></div>
 </div>
 
 <div id="breadcrumb">
 <ul>
  <li><a href="">A</a>
   <ul>
    <li><a href="">B</a>
     <ul>
      <li>C</li>
     </ul>
    </li>
   </ul>
  </li>
 </ul>
 </div>

</div>
</body>
</html>








Related examples in the same category

1.'th' Example
2.'axis' Example
3.'scope' specifies the group of cells to which header information on the current cell refers
4.table header tag
5.thead is the first section of a table. It formats the table header area.
6.Basic table with th tag
7.Style for table header
8.Nested table header
9.Table header style
10.Table header format
11.Table header column span
12.Table header and cell overflow hidden
13.Two level of table header
14.table header height: 50px;
15.Grouped table header
16.Selecting cells in head
17.th height: 29px;
18.th width: 6em;
19.th colspan="2"
20.th, td overflow: hidden;