Wetton 0 Report post Posted April 27, 2008 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: <Table></table> 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. <table><th><tr><td> HEADING </th></td></tr><tr><td> SUB TEXT</tr></td><tr><td><th>ANOTHER HEADING</tr></td></th><tr><td> SUB TEXT</tr></td></table> 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. <table border="1" align="left"><th><tr><td> HEADING </th></td></tr><tr><td> SUB TEXT</tr></td><tr><td><th>ANOTHER HEADING</tr></td></th><tr><td> SUB TEXT</tr></td></table> 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: <center><table border="1"><th><tr><td> HEADING </th></td></tr><tr><td> SUB TEXT</tr></td><tr><td><th>ANOTHER HEADING</tr></td></th><tr><td> SUB TEXT</tr></td></table></center> (The background colour goes off the normal default, or whats in your body tag) E.G. <body bgcolor="red"><center><table border="1"><th><tr><td> HEADING </th></td></tr><tr><td> SUB TEXT</tr></td><tr><td><th>ANOTHER HEADING</tr></td></th><tr><td> SUB TEXT</tr></td></table></center></body> (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. Share this post Link to post Share on other sites
jlhaslip 4 Report post Posted April 27, 2008 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/%23tablesNotice 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. Share this post Link to post Share on other sites
electriic ink 1 Report post Posted April 28, 2008 What happened to your code? You've nested the HTML incorrectly. You've written the code this: <a><b><c> XYZ </a></b></c> When it should be: <a><b><c> XYZ </c></b></a> Also, in one line, you wrote: <th><tr><td> HEADING </th></td></tr> 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: <table border="1" align="left"> <th><tr><td> HEADING </th></td></tr> <tr><td> SUB TEXT</tr></td> <tr><td><th>ANOTHER HEADING</tr></td></th> <tr><td> SUB TEXT</tr></td> </table> Should be: <table border="1" align="left"> <tr><th> HEADING </th></tr> <tr><td> SUB TEXT</td></tr> <tr><th>ANOTHER HEADING</th></tr> <tr><td> SUB TEXT</td></tr> </table> 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! Share this post Link to post Share on other sites
Wetton 0 Report post Posted April 28, 2008 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. :lol:Thanks. Share this post Link to post Share on other sites
KansukeKojima 0 Report post Posted April 29, 2008 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. Share this post Link to post Share on other sites
A200 0 Report post Posted April 29, 2008 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... Share this post Link to post Share on other sites
games4u 0 Report post Posted April 30, 2008 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: <form> Enter Your Name: <input type=text name="name"><br> Enter Your Email: <input type=text name="email"><br> Enter Comments: <textarea></textarea> </form> it would be better to code as: <form><table align=center border=0> <tr><th>Enter Your Name:</th><td><input type=text name="name"></td></tr> <tr><th>Enter Your Email:</th><td><input type=text name="email"></td></tr> <tr><th>Enter Your Comments:</th><td><textarea></textarea></td></tr> </table></form> Submit buttons and reset buttons can also added. It also gives a good output. Thank you. Share this post Link to post Share on other sites
rvalkass 5 Report post Posted April 30, 2008 it would be better to code as: <form><table align=center border=0> <tr><th>Enter Your Name:</th><td><input type=text name="name"></td></tr> <tr><th>Enter Your Email:</th><td><input type=text name="email"></td></tr> <tr><th>Enter Your Comments:</th><td><textarea></textarea></td></tr> </table></form> 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. Share this post Link to post Share on other sites
Forbez 0 Report post Posted April 30, 2008 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>). Share this post Link to post Share on other sites
