Advanced Tables

Name: Advanced Tables
Rating: 5 (1 reviews)
Author: ilyas-shezad

Dont you hate it when your tables come out looking like garbage? Well there are loads of ways to make a table look good, heres mine! (I will also be using CSS incase anybody wants to copy it for thier own uses).

HTML Code

<html>
<head>
<title>Your title here</title>
<style type="text/css">
<!--
body {
	background-color: #000000;
}
a:link {
	color: #FFFFFF;
}
a:visited {
	color: #FFFFFF;
}
a:hover {
	color: #FF0000;
}
a:active {
	color: #FF0000;
}
body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #FFFFFF;
}
-->
</style>
</head>
<body>
<br>
<table width=80% cellpadding=0 cellspacing=0 border=1 frame=box rules=all align=center bordercolor=black bgcolor=#333333>
<tr><td bgcolor=red><div align=center><strong>HEADER</strong</div></td></tr>
<tr><td height=100 valign=top>
Bienvenue � mon website! C'est bon!
</td></tr>
</table>
</body>
</html>

Okay now i will start with the first thing in the table tag. The code 'width=80%' will make the tables width 80% of the whole page. The code 'cellpadding=0' will make sure there are no paddings between rows/columns. The code 'cellspacing=0' will ensure that there are no spaces between rows/columns. The code 'border=1' will create a 1 pixel border around the whole table. The code 'frame=box' will make sure the border is all around the table and inside out (code has much more of an effect when viewed on firefox). The code 'rules=all' will ensure that the border is around everything in the table (apart from the content). The code 'align=center' will align the table into the center of the page. The code 'bordercolor=black' will make sure that the border colour is black. The code 'bgcolor=#333333' will set the tables background colour to a dark grey.

Okay now onto the code i added to the <td> tag. I firstly added the code 'height=100'. This code will make the height of the table row 100 pixels. The code valign=top will make all the text aligned to the top of the table.

Thats all for now

Author:

ilyas-shezad

Views:

2,226

Rating:

There are currently no comments for this tutorial, login or register to leave one.