Rank: Administration
Groups: Administration
Joined: 10/2/2008
Posts: 7
Points: -61
|
Okay, this is gonna be very quick and very informative all at the same time, there will be a more in depth Tables guide later, but this is so you can start building a web page with things positioned just so and be happy with your design skills!
So you have your first web page, at least if you have been following the tutorials, now you want control over your content, you want to control the width of the page, you want words, image, words and then under all of that you want some other stuff. Here we go, Tables are one of the most powerful and yet simple things to use in HTML.
Basically you are drawing a table, so here is a basic table, it has four cells, two on top and two on bottom, everything has exactly the same proportions:
<table> This tag begins the table
<tr> This tag means Table Row
<td> This tag is for a cell, now you have the very first three tags to make your table, the only things that are really visible though are going to be the <td> tags as these are your cells.
So you want each cell to be 50 pixels tall and wide, so here is the code to do that:
<table>
<tr>
<td height="50px" width="50px">
</td>
<td height="50px" width="50px">
</td>
</tr>
<tr>
<td height="50px" width="50px">
</td>
<td height="50px" width="50px">
</td>
</tr>
</table>
The <tr> tag begins a row, then <td> starts a cell, </td> ends that cell and after I had two cells I needed to move down a row so I had to end my row with </tr> Then I began a new one with the <tr> tag and put the two cells under the other two. Now we have a four cell table, 2 x 2. Something to know about tables though is that they have default padding and spacing and borders, so for training purposes we are going to get rid of the padding a spacing and set our table at 1 pixel with a color of black so that you have visibility of the table you are building.
Do this:
<table cellpadding="0" cellspacing="0" border="1px" bordercolor="black">
Now you will be able to see the table, save your file and then view it using a web browser and you will be able to see your table. Now to put content in the table you just need to put it between the <td></td> tags in each cell, BUT BEWARE if your content takes up more than the 50 x 50 pixels that you gave it it will cause the table to grow and things won't look how you want it to!
That is your introduction to Tables, hope you enjoyed it and next we shall have a more in depth look at Tables!
|
Rank: Newbie
Groups: Member
Joined: 10/13/2008
Posts: 4
Points: 12
Location: UK
|
Personally I would only use tables for tabular data. For everything else I would use Divs and style them with CSS..... yours comments please
Everyone has a photographic memory but some of us don't have any film.
|
Rank: Administration
Groups: Administration
Joined: 10/2/2008
Posts: 7
Points: -61
|
I actually completely agree, however I am starting with the basics so that way new users can begin learning with standard HTML and then once they have a handle on that they will move up to more modern things. I use CSS for almost all of my web design, mainly because of ease of use, for instance check out this site: http://www.diypcfixes.com/ that is done with CSS and Tables. I still use tables for certain things, like getting a setup just so and then positioning the entire table with CSS as well as defining all of the cells with CSS. Thanks for joining this community though, I really enjoy the feedback. Divs and even spans are good, I agree with you also there, however when trying to make a site that works cross-platform, using Tables can definitely help bridge that gap and keep the site at 100% compliant with the World Wide Web Consortium's standards! Your comments to that please!
|
Rank: Newbie
Groups: Member
Joined: 10/13/2008
Posts: 4
Points: 12
Location: UK
|
Certainly using tables can ease compliance problems for junior programmers, I remember the troubles I had getting my head around the "box" model and the cross browser problems that ensue (and to a degree still do!). Using tables is a good way for initial sites but I believe that learning the "more" correct way to layout a site is beneficial and in the long run less confusing. Tables still have their place in site design but not necessarily in layout design.
I am still what I would call a junior programmer, my background being in hardware, and most of my knowledge has come from forums and tutorial sites... keep up the good work.
Everyone has a photographic memory but some of us don't have any film.
|
Rank: Administration
Groups: Administration
Joined: 10/2/2008
Posts: 7
Points: -61
|
I am not so sure that I wholly agree with that statement, all due respect given of course. Especially in regards to just about any version of Internet Explorer. IE often confuses placement with CSS, and now with Chrome out well there is just a whole nother ballpark to cover. Supposedly Chrome is pretty much like FF3 in how it reads code but I have found several issues when designing for it, amusingly enough most of them actually had to do with CSS!
I concede the point about tables being primarily for junior programmers, on the flip side they definitely are a necessity in some design styles and layouts. There is a reason that several professionally designed sites continue to use it, however there is starting to be a migration to CSS design such as with the New Facebook layout, from what I have seen there is not a table to be found there, it is quite impressive actually.
|
