Forgot Password / Register
Site Statistics
Total Members: 509
Total Tutorials: 242
Newsest User: Lestop
Todays Unique Hits: 155
0 Users 3 Guests Online

Advanced Tables

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).


<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;
<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!

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
There are currently no comments for this tutorial.