Howto: Code a tableless website part 1
January 22, 2008 | Howto
Preface
In this tutorial, I will teach you how to code a website without any tables. We will use CSS and <div> tags instead. The sample website we’re going to build consists of a header, navigation system on the left, and the main content on the right. Also a footer is added. I asume you already have basic or decent experience with HTML coding.
Get started
Let’s start off by creating two files. One will be the CSS file and one will be the HTML file. Now make your HTML look like the following code.
1 2 3 4 5 6 7 8 9 10 11 | <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <title>Tablesless Website</title> </head> <body> <div id="container"> Hello </div> </body> </html> |
For styling we use the HTML <div> tags and we use CSS. As you can see I gave the <div> an id. Id’s are always unique. There can only be one id. We’re now going to give this <div> a styling. Enter the following code inside your CSS file and then save it as ’style.css’ in the same folder as your html file. The <link> tag inside your <head> in the HTML file includes the CSS file.
1 2 3 4 5 6 | /* We use the # when we define the styling of an id */ #container { width: 700px; margin-left: auto; margin-right: auto; } |
Explanation: Everything between the brackets are given to the specified tag before it. In this example we give the ID, container a width, margin-left and margin-right. The width specifies the width of the container (orly!). Margins define space between the specified tag and the element next to it. In this case the element next to <div id=”container”> is <body>. By setting the margin-left and margin-right at ‘auto’, #container will order perfectly in the middle of the sample website.
View the sample here.
2 Responses to “Howto: Code a tableless website part 1”
Well written article.
By Kiora on Oct 28, 2008
This is not enough i dont understand the example which you linked some more content yaar, no hello some thing more content
thanks for the code which you explained i.e usefull that i can say
By jithender on Nov 4, 2008