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.