Table layout : table « Tags « HTML / CSS

Table layout

      
<!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" xml:lang="en" lang="en">
  
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Vivid</title>
<style type='text/css'>
/***************************************************************
  Vivid v1.0 
  By Ori Pearl
  http://www.oripearl.com/
  Instructions can be found in the attached Instructions.txt
***************************************************************/

/**********************************
  Reset settings  
**********************************/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,code,del,dfn,em,img,q,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
border:0;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0;
padding:0;
text-align:left;
vertical-align:baseline;
}

/**********************************
  Basic elements 
**********************************/
body {
background:url('Vivid-images/top-bg.jpg') repeat-x #fff;
color:#383737;
font-family:Verdana, Arial, sans-serif;
font-size:13px;
}

h1 {
color:#587f29;
font-size:18px;
font-weight:400;
margin-bottom:8px;
}

h2 {
color:#e65a05;
font-size:16px;
font-style:italic;
font-weight:400;
margin-bottom:8px;
}

a {
color:#383737;
}

a:hover {
color:#000;
}

a img {
text-decoration:none;
}

p {
margin-bottom:18px;
text-align:left;
}

p img {
margin:6px;
}

blockquote {
color:#626262;
font-style:italic;
}

/* Table */
caption,th,td {
font-weight:400;
text-align:left;
}

table,td,th {
vertical-align:middle;
}

table {
margin-bottom:8px;
width:100%;
}

th {
background:#C3D9FF;
font-weight:700;
}

th,td {
padding:4px 10px 4px 5px;
}

tr td {
background:#E5ECF9;
text-align:center;
}

/* Lists */
ul,ol {
margin:0 16px 8px;
}

ul {
list-style-type:square;
}

li {
margin-left:14px;
}

.date {
font-size:12px;
font-style:italic;
}

/**********************************
  Header settings  
**********************************/
#header {
margin:140px auto 0;
width:900px;
}

#header #header-message {
color:#ef5400;
float:right;
font-size:16px;
}

#header #logo {
float:left;
}

/**********************************
  Menu settings  
**********************************/
#menu-strip {
background:#be370e;
float:left;
height:40px;
margin-top:50px;
width:100%;
}

#top-menu {
margin:8px auto;
width:900px;
}

#top-menu li {
display:inline;
float:left;
list-style-type:none;
margin-left:0;
margin-right:40px;
}

#top-menu a {
color:#fff;
font-size:17px;
text-decoration:none;
}

#top-menu a:hover {
color:#ffa46d;
}

/**********************************
  Main content settings  
**********************************/
#wrapper {
clear:both;
margin:0 auto;
padding-top:30px;
width:900px;
}

#main-content {
float:left;
margin-right:40px;
width:560px;
}

#main-content p {
line-height:20px;
}

.block {
margin-bottom:18px;
}

/**********************************
  Sidebar settings  
**********************************/
#sidebar {
float:left;
width:300px;
}

#sidebar img {
float:left;
}

/**********************************
  Search form settings  
**********************************/
.search-form {
margin-bottom:18px;
}

.search-form #searchterm {
height:17px;
width:146px;
}

.search-form #submitbutton {
background-color:#fff;
border:solid 1px #383737;
color:#383737;
font-size:13px;
}

/**********************************
  Footer settings  
**********************************/
#footer {
background:#be370e;
float:left;
height:24px;
margin-top:50px;
width:100%;
}

#footer-content {
color:#fff;
font-size:11px;
margin:5px auto;
width:900px;
}

#footer-content a {
color:#fff;
}

#footer-content p {
margin-bottom:0;
}
</style>


      <!--[if IE]>
        <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection">
      <![endif]-->
      <link rel="shortcut icon" href="images/favicon.ico" />
  </head>
  
  <body>
    
    <div id="header">    
      <!-- Logo image -->
      <img id="logo" src="images/logo.jpg" alt="Vivid" />
      
      <!-- Right header section -->
      <div id="header-message">
        <img src="images/testimonial.jpg" alt="Testimonial" />
      </div>
    </div>
  
    <div id="menu-strip"> <!-- Menu -->
      <ul id="top-menu">
        <li><a href="index.html">home</a></li>
        <li><a href="#">showcase</a></li>
        <li><a href="about.html">about</a></li>
        <li><a href="#">blog</a></li>
        <li><a href="#">contact</a></li>
      </ul>
    </div>
    
    <div id="wrapper"> <!-- Content wrapper -->
      <div id="main-content">    
        
        <div class="block"> <!-- Block class is used for adding space around a paragraph -->
          <h1>Vivid - a colorful clean template</h1>
          <h2>Extensive guide for easy and simple modifications</h2>
          <p>
            Welcome to Vivid - a colorful and clean web template. Vivid is coded cleanly for <b>simple and easy modifications</b>. Vivid was tested for compatibility on all major browsers including IE6, IE7, Firefox and Safari. The code is valid <a href="http://validator.w3.org/check?uri=referer">Strict XHTML</a> and CSS.<br/>            
            <a href="#"><img src="images/showcase.jpg" alt="Showcase sample" /></a>
            <a href="#"><img src="images/showcase.jpg" alt="Showcase sample" /></a>
            <a href="#"><img src="images/showcase.jpg" alt="Showcase sample" /></a>
          </p>          
          <p>And now for something completely different...</p>
          <h1>Elements samples</h1>
        </div>
        
        <div class="block">
          <h2>A table</h2>          
          <table>
            <tr><td></td><th>Vivid template</th><th>Other template</th><th>Other template</th></tr>
            <tr><th>Elegant</th><td><img src="images/v.gif" alt="Yes" /></td><td><img src="images/x.gif" alt="Yes" /></td><td><img src="images/x.gif" alt="Yes" /></td></tr>
            <tr><th>Simple editing</th><td><img src="images/v.gif" alt="Yes" /></td><td><img src="images/x.gif" alt="Yes" /></td><td><img src="images/x.gif" alt="Yes" /></td></tr>
            <tr><th>Extensive guide</th><td><img src="images/v.gif" alt="Yes" /></td><td><img src="images/x.gif" alt="Yes" /></td><td><img src="images/x.gif" alt="Yes" /></td></tr>
          </table>
        </div>        
        
        <div class="block">          
          <h2>blockquote element</h2>
          <blockquote><p>&quot;This is a blockquote element, specially used for quotes. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&quot;</p></blockquote>          
        </div>
        
        <div class="block">
          <h2>Unordered list</h2>          
          <ul>
            <li>Item 1: Lorem ipsum dolor sit amet</li>
            <li>Item 2: Consectetuer adipiscing elit</li>
            <li>Item 3: sed diam nonummy nibh euismod tincidunt</li>
          </ul>
        </div>
        
        <div class="block">
          <h2>Ordered list</h2>        
          <ol>
            <li>Item: Lorem ipsum dolor sit amet</li>
            <li>Item: Consectetuer adipiscing elit</li>
            <li>Item: sed diam nonummy nibh euismod tincidunt</li>
          </ol>
        </div>        
      </div>
      
      <div id="sidebar"> <!-- The sidebar wrapper -->
        <h2>The sidebar</h2>        
        <p>          
          <b>This is the sidebar.</b> You can insert here any content that fits a sidebar.<br/><br/>
          <img src="images/sample1.jpg" alt="Sample image" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam a dolor id dolor elementum varius. Nunc auctor nunc ut nulla. Proin eget sapien at ante blandit lobortis.<br/><br/>
        </p>
        
        <form class="search-form" action=""> <!-- Search form -->
          <p>
            <input type="text" id="searchterm" />
            <input type="submit" value="Search" id="submitbutton" />
          </p>
        </form>  
        
        <ul>
          <li>Lists are always welcome</li>
          <li>Sidebar list item B</li>
          <li>Sidebar list item C</li>
        </ul><br/>                
        
        <h2>Latest news</h2> <!-- News item sample -->                    
        <p>
          <b>News item title here</b><br/>          
          <span class="date">March 18th, 2008</span><br/>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam a dolor id dolor elementum varius. Nunc auctor nunc ut nulla. Proin eget sapien at ante blandit lobortis.
        </p>
        
        <p>
          <b>News item title here</b><br/>
          <span class="date">March 18th, 2008</span><br/>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam a dolor id dolor elementum varius. Nunc auctor nunc ut nulla. Proin eget sapien at ante blandit lobortis.
        </p>        
      </div>
    </div>
    
    <div id="footer">
      <div id="footer-content">
        <p>&copy; Vivid 2008 : All rights reserved | Designed and coded by <a href="http://www.oripearl.com">Ori Pearl</a> 
        | <a href="http://www.cssportal.com/">CSS Portal</a> | This website is <a href="http://validator.w3.org/check?uri=referer">XHTML Valid</a></p>
      </div>
    </div>
  </body>
</html>

Related examples in the same category

1.	'table' Example
2.	Nested tables
3.	How tables linearize
4.	A basic table
5.	'col' Example
6.	'summary' specifies a brief description of a table
7.	basic table
8.	Basic table with tr, td
9.	A simple XHTML table
10.	table tag opens a table
11.	Table inline style
12.	Calendar table
13.	Fixed table first column
14.	Make table font bold
15.	table font-family: arial, verdana, sans-serif;
16.	Table style
17.	table color: white;
18.	Table styling
19.	Table with shading colors
20.	HTML markup for a simple table (continued)
21.	providing table alignment and spacing
22.	A table with spanned rows and columns
23.	Img in a table cell
24.	Table with summary
25.	Using th for table heading
26.	Dividing a table into head, body and footer.
27.	A Basic Table with Caption
28.	Using the table header attribute
29.	table line-height: 1.3em;
30.	table padding: 0;
31.	table color: #fff;
32.	table table-layout: fixed;
33.	table caption-side: bottom;
34.	HTML markup for a simple table
35.	Vertical alignment in table cells
36.	Styling table columns
37.	A Basic Table 2
38.	Adding Text Alignmnet for table
39.	Stripe the table
40.	Nested css table
41.	Structural Table
42.	CSS Table Rowspan Demo
43.	Spreadsheet data
44.	Fixed Table
45.	Shrinkwrapped Table
46.	All table content is enclosed within the tbody
47.	Style for table body
48.	Horizontal Stretched Table
49.	Using the th element for table headings
50.	Table heads, bodies and footers
51.	An Accessible Table
52.	Selecting cells in body
53.	Selecting all tables and cells
54.	Selecting all cells
55.	'align' specifies the horizontal alignment of the 'table' and 'iframe'