CSS Tables: Formatting a Web Page with Cascading Style Sheets Part 1
Tables are commonly used in HTML to format the lay out of the web page. Instead of just having a heading and text that runs from left to right and top to bottom, you can have pages that are formatted like a newspaper or however you’d like. But the use of tables can be a bit complex and time consuming – and they aren’t necessarily search engine friendly. So, instead of using tables, you may want learn how to use CSS to format your web page.
In this section, we will go through the process of creating a web page in which the layout and design are completely formatted using CSS, also referred to as Cascading Style Sheets.
First of all, you must begin with the basic HTML web page layout.
HTML Web Page Layout
<html>
<head>
<title>Your Page Title</title>
</head>
<body>
</body>
</html>
Now, let’s assume that we want to add a header, navigation, content and footer section to our web page.
Let’s begin by adding the header section to our HTML page. We will be adding the following CSS code between the <body> and </body> tags:
<div id="header">
<h1>Website Name</h1>
</div>
This CSS code will specify where the header is to be displayed within the web page.
Header HTML Code
<html>
<head>
<title>Your Page Title</title>
</head>
<body>
<div id="header">
<h1>Website Name</h1>
</div>
</body>
</html>
Notice we have added <div id="header"> to our HTML code. This is what is used to identify the section of code we want to format.
Our next step will be to add some CSS code to our page to format our new header section.
Place the following code between the <head> and </head> tags:
Header CSS Code
<style type= "text/css" title="styleid" media="all">
<!–
#header
{
background: #ddd;
padding: 25px;
}
#header h1
{
margin: 0;
font-family: Verdana, Geneva, sans-serif;
}
–>
</style>
The id #header within the above CSS matches the <div id="header"> we placed within our HTML code.
Notice the color code only contains #ddd instead of #dddddd? When the second set of three numbers or letters are the same as the first three, you only need to include the first 3.
We also included a #header h1 id. This id will enable us to specify the formatting for the h1 tag in just the header section.
This concludes part one of the CSS Tables lesson. In the next lesson, we will continue with part two of how to format your web page with CSS.