Skip to main content

HTML Layouts – Using Tables

By
Website Layouts
Website Layout is very important to make your website look good. So you need to design your website properly.
There is two ways of designing layout.
  1.  Using Table
  2. Using CSS(Without using table)
Here, we will discuss using tables.

Most websites have put their content in multiple columns (formatted like a magazine or newspaper).
Multiple columns are created by using <table> or <div> tags. Some CSS are normally also added to position elements, or to create backgrounds or colorful look for the pages.

HTML Layouts – Using Tables
The simplest way of creating layouts is by using the HTML <table> tag.
The following example gives you more appropriate vision:
Code:
<html >
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Welcome To My First Website</title>
</head>
<body>
<html>
<body>
<table width=”960″ border=”0″ align=”center”>
<tr>
<th height=”77″ colspan=”2″ bgcolor=”#CCCCCC” scope=”col”>This is a header part</th>
</tr>
<tr>
<th colspan=”2″ bgcolor=”#FFCCCC” scope=”col”><table width=”300″ border=”0″>
<tr>
<th width=”100″ bgcolor=”#FFFF66″ scope=”col”>Home </th>
<th width=”100″ bgcolor=”#FF99FF” scope=”col”>About US</th>
<th width=”100″ bgcolor=”#66FFFF” scope=”col”>Contact Us</th>
</tr>
</table></th>
</tr>
<tr>
<td width=”123″ height=”311″ valign=”top” bgcolor=”#CCCCFF”><table width=”123″ border=”0″ cellspacing=”2″>
<tr>
<th bgcolor=”#999999″ scope=”col”>Home</th>
</tr>
<tr>
<td align=”center” bgcolor=”#999999″><strong>HTML</strong></td>
</tr>
<tr>
<td align=”center” bgcolor=”#999999″><strong>CSS</strong></td>
</tr>
</table></td>
<td width=”827″ bgcolor=”#3399CC”>&nbsp;</td>
</tr>
<tr>
<td colspan=”2″ align=”center” bgcolor=”#CCCCCC”>Copyright &copy; 2012. All rights reserved.</td>
</tr>
</table>
</body>
</html>
</body>
</html>

Output
Labels:

Comments

Post a Comment

Popular posts from this blog

CSS List

By
CSS allows you to customize the lists that can be made with HTML  to the extent that even images can be used as bullet points for unordered lists. CSS List Style Type If you want to use something different from the default numbering of ordered lists, or the bullets/discs of unordered lists, then all you have to do is choose a different style for your lists. CSS allows you to select from a wide variety of different list item shapes. Unordered list styles: square, circle, disc (default), and none Ordered list styles: upper-alpha, lower-alpha, upper-roman, lower-roman, decimal (default), and none Code:
Post a Comment
Read more

Accessible Forms

By
Forms aren't the easiest of things to use for people with disabilities. Navigating around a page with written content is one thing, hopping between form fields and inputting information is another. Because of this, it is a good idea to add a number of elements to the form. Labels Each form field should have its own label. The label tag sorts this out, with a for attribute that associates it to a form element:
5 comments
Read more

Join in MySQL

By
Join clause is used to combine rows from two or more tables depending upon common field between them. There are different kinds of Joins. The most common and useful Join is Inner Join. Inner Join: It will return all rows from multiple tables where the condition is met.
Post a Comment
Read more