Tables are useful when you make your own web site. Apart from displaying information in a nice spreadsheet like structure. It can also be used to align your web site layout. However the over use of tables for web site alignment is frowned upon as it mean bad programming practice.
As a lay user, we are not expert programmers. We may end up using programs like Dreamweaver, Frontpage or similar software to build our web sites. However I did notice that Dreamweaver is also not a follower of good programming practices when it comes to aligning the various web page block sections, it overuses tables to create spacing and margins. So if you are part software user, part programmer, you would definitely knock your head on the wall when you try to edit the HTML codes directly after initially using Dreamweaver to create the overall page structure.
Using tables to align sections is a lot easier than using CSS. Though the current web page developer convention is to use CSS to align each block accordingly to each block section of the web page. I’ll leave that kind of coding to the experts. For me, I’ll use a simple table set up to get each block section into exactly where I want them to be and for the rest of the layout and design, I use CSS.
Tables uses three sets of HTML codes, namely <table> – to tell the browser you are starting a table, <tr> – to create a table row, and <td> – to create a table column.
Let’s say we create a simple 4×4 table, we will code it out as:
<table>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
And we will get:
| 1 | 2 |
| 3 | 4 |
And to get something more complicated like a header in the table that spans across two or more column we use the colspan=”x” in the td tag. So let’s create a 5×4 with a header row:
<table>
<tr><td colspan=”2″>Header</td></tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
And we get:
| Header | |
| 1 | 2 |
| 3 | 4 |
And finally to make the table border lines invisible, we use border=”0″ in the table tags itself.
<table border=”0″>
Another important code to know is cellspacing=”x”. This is used to control the gap between the cells. This code is important to know because CSS code cannot control the gap between cells, especially if you want to remove the gap in between. To remove the gap, use cellspacing=”0″:
<table border=”0″ cellspacing=”0″>
That’s the basics of making tables using HTML when you make your own web site.
- Learning HTML basics
- HTML Text formatting
- More HTML Text formatting
- Adding images to your website
- Making links and anchors when you make your own web site
- Creating tables, rows and columns in your web site
More related HTML tutorials
- Learning HTML codes for building a web page
- Lesson 1 – The Basic HTML Tag
- Lesson 2 – Create a website page
- Lesson 3 – Text formatting tags
- Lesson 4 – Aligning the paragraph text
- Lesson 5 – Making bullet list and numbered list
- Lesson 6 – Create tables in your website
Tags: html, online, web, webhosting, website
