If you are a novice web designer, but want your site to look advanced and proffessional, then what better way to do so than to use HTML tables?

HTML tables are a really easy way of formatting your text, to make your ste look proffesional. It looks good, and its easy, what more can you ask for?

You have to use the <table> tag, so first lets start off with:



In between theese two tags, we will add the data for the table, using the tags <td><tr> and <th>.
<th>=Table Heading (Title)
<td>=Table Data (what you want in the table) [if you do not use this then the text will appear outside of the table rather than in it]
<tr>=table row (new row)

So, lets get started.



Thats the basics sorted, just add more if you need more heading/subtexts, or remove if you need less.

Now, lets sort out the border, and alignment. You do this in the <table> tag.



The border="1" simply means theres a size one border. if you want the thickness of this border increasing, then increase the number.
To change alignment, you can choose to align="right", if you want it centered it may be easier to follow this code:



(The background colour goes off the normal default, or whats in your body tag) E.G.



(This also works for text color.)

Thats more or less it, your step by step guide to HTML tables. If you have anymore questions you need to ask, go ahead.

Thanks.

 

 

 

Reply

Besides creating a 'professional' presentation of Data, there should be a focus on Accessability, too.
I recommend the following link from the w3c Group that deals with this issue in depth.

http://www.w3.org/TR/WCAG10-HTML-TECHS/#tables

Notice that the Table tag should not be used to structure a page, though. it should only be used for presentation of 'tabular' data. if the data comes pout of a database, it is likley a good candidate for using a table, otherwise, consider the use of CSS div's for the page structure.

Reply

What happened to your code? You've nested the HTML incorrectly. You've written the code this:



When it should be:



Also, in one line, you wrote:



You've started a table cell (in tag <th>) outside of any table row! Also, <th> and <td> are treated exactly the same so <tr><th></th></tr> is valid on its own, without a <td>.


So code like this:



Should be:



Compare the difference in terms of output:



Looks quite trivial but in terms of output it's not. Good effort but you still have a fair bit of learning left to do!

 

 

 

Reply

Thanks electric, I was just about to ammend this after I realised my method was wrong (after I started designing my site) But you beat me to it.

Thanks.

Reply

If you know CSS, I would advise using that to create your layouts and templates, instead of tables. Table suck up bandwidth, and are not very professional anymore.

Reply

If you have dreamweaver or any other WYSIWYG, then use it. Tables are good for some things, but don't rely on it 100% for your site- there are such things as divs and other ways to make a page index nice. CSS is good to use too...

Reply

I would like to add a usual technique used by web designers.
Most of the websites (or webpages) use tables; so it is a nice idea to use tables with border=0. Doing this gives you a very good control over the display of the webpage.

For example: consider a form for entering comments on a website. Instead of simply designing the form like:


it would be better to code as:


Submit buttons and reset buttons can also added.

It also gives a good output.
Thank you.

Reply

That code is not better, but wrong. A form is not tabular data, so does not belong in a table. Also, the align tag has been deprecated since HTML 4, so should not really be used.

Reply

Yeah, this really needs to be addressed. Tables are the abused sibling of the internet. 95% of websites are designed fully by tables. I personally hate tables and try my best to avoid tables at all costs. What can be done with tables can be done better with division tags (<div>).

Reply