Simple Table Tutorial

I've always been told 'master tables and you've pretty much mastered html'. So, here's how to creat a table. it will be a simple one. Tables can be used for layouts (for those who dont like iFrames, Taco (= ) well here it is :

Code:

---

<table>
 * <tr>
 * * *<td> Text here</td>
 * </tr>

 *<tr>
 * * *<td> This Appears Next To "Text here"</td>
 *</tr>
</table>

---

Ok the way that works:

<table> - this is the beggining of the table. it starts it off. you can put the width and height of the table here.

<tr> - this starts a new row. The one going horizontally.

<td> - this is a column. also known as a cell. The table is made up of cells.

</tr> </td> </table> - these tags just close the previous stated.

yes but if you use a pure table site you will need an iframe if you want your content to load in a specific box as you can&#39;t point a link to a table

Or you can have the same table, same layout and such, and have it all load again. with the content you wish. There are simple ways to avoid using iframes, i myself use iframes quite alot.

ya but that way makes every page a huge mess of tables which is hard to edit

Quote:

---

Originally posted by tfc_generalKMK@Feb 25 2005, 09:14 PM
ya but that way makes every page a huge mess of tables which is hard to edit

[snapback]10506[/snapback]

---

Yes, that is why i&#39;ve been told &#39;Master tables, and you&#39;ve mastered html&#39;. If you can get around tables very well you will be pretty set for any type of layout. doesn&#39;t matter how big the mess of tables is. ;)

ya i prefer css layouts take a look at ultimategaming.info/pesronal.php that is all layout using absolute positioning and divisions in the main html page

Well then, how about you post some css tuts? you like them so much (= I use html/css/js for making websites. mostly html and css

You dont need iframes, you can create pages with content inside the tables - or use php includes. Iframes are HORRIBLE - and should be avoided at all times.

Thanks for your submission mate&#33;

sure why not =) i will start working on a 3 layout using pure css tutorial based off of my personal site (honestly i may just post my code for it and then show the css sheet for it also lol

I, personally, use tables quite a bit. They offer a great deal of control over page and content layout, are cross-browser & backwards compatible, and are more flexible than positioned elements in many cases.

The typical layout of a basic website can be quickly defined and easily tweaked with this simple Table:

Code:

---

<table>
 * * <tr>
 * * * * *<td colspan="2">Header Content</td>
 * * </tr>
 * * <tr>
 * * * * *<td>Left Content</td>
 * * * * *<td>Main Content</td>
 * * </tr>
</table>

---

It&#39;s a pain, for instance, to center positioned elements in the browser window (particularly in Mozilla browsers), which makes having a "centered" website difficult to achieve across all browsers without scripting. However, adding a simple align="center" attribute to your <table> tag will accomplish this effect in just about any browser.

dmeister

Tables can add excessive amounts of markup to your page though. therefore, increasing the amount of bandwidth used. With a pure CSS layout, you have clean and concise markup, and pages load faster.

Granted, sometimes you HAVE to use tables, and it IS possible to make them XHTML 1.0 validated. However, I have only run across 2 situations where I have had to use tables over pure CSS, in 5 years.

Tables need not add "excessive markup" though; after all, you can specify most table attributes using CSS. And if you have so many tables that bandwidth poses an issue, you probably aren&#39;t going to save that much more by applying the numerous style rules necessary to layout an extensive multi-column, multi-row layer table.

Further, I would argue that tables give you more stable control of your output; that is, they are more robust. CSS layer-like tables can behave in very strange ways without very explicit definitions, particularly if the content is larger than the bounding box. CSS layer-like tables also need considerably more tweaking to keep the elements positioned correctly, in my opinion. You don&#39;t have to specify much of anything for a table, unless you want to, of course.

And, again, centering a CSS layer-like table is considerably more difficult than simply adding an Align attribute to a Table tag. Scripting is generally required, which may not work in every browser. And <TD> is just as XHTML-compliant as <DIV>, so I&#39;m not sure why that would be an issue..?

dmeister

well, i could have 2 <div>&#39;s side by side, in perfect alignment (in every browser, on every platform)...and the code would only entail the <div> tags and the content. no <align> tags (which are not standards compliant), no <tr> tags, and so on....

and centering with <div>&#39;s is far from difficult. unless you feel that this is difficult:

Code:

---

#centered-div {
margin: 5px auto;
}

---

you DO save on bandwidth, because your styles, ideally, are kept in a separate stylesheet, and NOT inline styles, which defeats the purpose.

allow me to provide you with some links:
"why tables are stupid"
top 10
developing

and if you haven&#39;t already...may i suggest you look at "design with web standards" by Jefferey Zeldman.

Quote:

---

and centering with <div>&#39;s is far from difficult. unless you feel that this is difficult:

---

To the best of my knowledge the "auto" value for margin width only centers elements in strictly standards-compliant browsers. If I recall, it is does not work in this manner in ealier versions of IE (still by far the most popular browser in use) and even new versions of IE must be forced into standards-compliant mode first.

Quote:

---

you DO save on bandwidth, because your styles, ideally, are kept in a separate stylesheet, and NOT inline styles, which defeats the purpose

---

Styles applied to tables are also saved in your style sheet file. The difference in bandwidth will ultimately boil down to the few bytes you will save by using "<div>" instead of "<tr><td>".

And, referring to your website, "Why Tables are Stupid:"

Quote:

---

* mixes presentational data in with your content.

---

I disagree with this notion as far as layout is concerned. I agree that the specifics of style (colors, font attributes, etc.) should be kept separate, but overall layout defines the very context of the content. Take a look at a typical, moderately complex website, and you will see that much (if not most) of the "content" is actually layout-related, not entirely unlike a newspaper. Consequently, the positioning (presentation) of sub links, main navigation, feeds, search fields, bottom navigation, ads, banner images, and many other content elements becomes an integral part of the content.

Quote:

---

This makes the file sizes of your pages unnecessarily large, as users must download this presentational data for each page they visit.

---

This is a weak argument for tables, since CSS style rules can still be stored separately.

Quote:

---

This makes redesigns of existing sites and content extremely labor intensive (and expensive).

---

A completely unfounded premise, particularly given that many applications used for mainstream web publication, including Dreamweaver, work with table layout.

Quote:

---

It also makes it extremely hard (and expensive) to maintain visual consistency throughout a site.

---

Another unfounded pemise. And larger sites often rely on templates and content management systems, anyway.

dmeister

"To the best of my knowledge the "auto" value for margin width only centers elements in strictly standards-compliant browsers. If I recall, it is does not work in this manner in ealier versions of IE (still by far the most popular browser in use) and even new versions of IE must be forced into standards-compliant mode first."


this is incorrect. the "auto" value even centers <div>&#39;s in IE 5.2 for MAC, which we all know to be the worst browser to support standards compliance. IE 6, never needs to be forced into standards-compliant mode. Granted it can be forced into quirks mode by placing the XML prologue into your markup. IE 5.5 for PC responds to the "auto" value for centering, because every site we design, we test on every IE version since v.4 for PC, and we&#39;ve never...never had it be a problem. Same goes for the last 2 versions of IE for MAC.

Granted...there isn&#39;t much difference in bandwidth difference between two tags, consider this. My company has an extranet log-in pages for each client. There are currently 50 active clients, who use their log-ini page every day. When I recoded the extranet to be standards compliant (got rid of all tables, <font> tags, and javascript image roll-over scripts), a single extranet log-in page reduced it&#39;s size by 17KB. I know that seems like very little, but multiply that by 50, it&#39;s 805KB. Then multiply that by 5 days a week, it&#39;s 4.45MB. Now multiply that by 52 weeks a year, and you can see the signifigance. It does save money.

The mixing of tables and CSS can be done quite well, and nearly all aesthetic aspects of tables can be handled in an external CSS, true. But attributes like "align" and "border" are depreciated. You can&#39;t get them to validate even XHTML 1.0 transitional. What happens when XHTML 4.0 or 11.0 comes out and <table> tags are depreciated. Which by the way is already being discussed, by the W3C.

For making a rigid grid of tabular data, sure...a table is very useful.
For an entire site design, it is overdone.
Then again...like you said, people still use IE, which boggles my mind in itself.

Oh, and my company&#39;s CMS for our clients is table free.

Quote:

---

Then again...like you said, people still use IE, which boggles my mind in itself

---

I use IE as my primary browser for that very reason. It is still the most popular browser out there.

Quote:

---

this is incorrect. the "auto" value even centers <div>&#39;s... IE 6, never needs to be forced into standards-compliant mode. Granted it can be forced into quirks mode by placing the XML prologue into your markup.

---

I use IE for Windows as my standard browser (v6 with SP2), and it does not support centered DIVs without being forced into compliance mode with a Strict doctype.

Quote:

---

When I recoded the extranet to be standards compliant (got rid of all tables, <font> tags, and javascript image roll-over scripts), a single extranet log-in page reduced it&#39;s size by 17KB

---

Unless you used a helluvalot of Font tags, I would guess that your JavaScript roll-over code was almost certainly responsible for the vast majority of that though.

Quote:

---

I recoded the extranet to be standards compliant (got rid of all tables...

---

You seem to keep implying that tables are not XHTML compliant?

Quote:

---

What happens when XHTML 4.0 or 11.0 comes out and <table> tags are depreciated. Which by the way is already being discussed, by the W3C.

---

Even if some geniuses with the W3C decide to deprecate Table tags, I assure you that just about every browser in existence will support them for many, many years to come.

Quote:

---

Oh, and my company&#39;s CMS for our clients is table free.

---

Do you have some examples of sites that use pure CSS for moderately complex layout? I actually tried finding a few last night, but didn&#39;t have any luck (still a bunch of Table users out there). Being an open-minded person though, I&#39;d be interested in seeing how such sites have turned out, so if you know of some nicer looking ones, please post a few links.

dmeister

Quote:

---

What happens when XHTML 4.0 or 11.0 comes out and <table> tags are depreciated. Which by the way is already being discussed, by the W3C

---

I should also add that it probably makes more sense to design for backwards compatibility for the millions of browsers already out there, rather than to worry about browsers that don&#39;t even exist yet. And table layout will be more compatible with earlier browsers than CCS-layer layout.

dmeister

Alittle off topic but why do people use IE? If you use the "Make Firefox faster" tutorial Fire fox is a hell of alot better then IE.

Mainly, because it comes pre-installed on Windows.

dmeister

sad isn&#39;t it SoujiroTheTenken

firefox has been one of the things that has made my webdesign, and webviewing alot nicer

but hopefully in ie 7 they will fix all this horrible crap and make it standards compliant so people don&#39;t have to say oh is this IE complaint instead of just looking at the w3schools.com validator

Ok, now I agree and disagree with many of the comments here, but to touch on a few I&#39;d like to make some brief points.

Just to state, I&#39;ve been utilizing and creating with HTML for 8 years, so I have a little background.

First of all, it&#39;s true that tables play a major role in the creation of a well-built and functional website. They are the skeleton to the entire page and if used correctly will allow pristine viewing and editing. Most pages you see on the internet now are very versatile when it comes to cross-browser testing and resolution-fitting because of their ability to use relative percentages in their embedded tables.

Secondly, iFrames are new and being new and having the word "Frame" in their title immediately causes some bad aura around their existance. Frames always receive a heavy blow because of their limitations on search engines, and the annoyance of the size limit. They also lock pages into a set shape so that any pages that need more room will need to be completely different during the creation method. This is one of the reasons that iFrames were created in the first place. Not only are they embeddable anywhere in the document, they can be automatically resized via a little javascripting, and they can be hidden from view or popped out on pages that don&#39;t need them. Again, when properly utilized they can prove to be a fine tool. I use iFrames in a number of my web layouts and have never found them to be a problem. They allow me to create pages that need only load once, hence speeding up the sites performance in imaging no matter what the connection speed, and allowing caching to do it&#39;s job. No longer does the screen blink to white between clicks.

Naturally I think that CSS was an excellent invention and saves much room in the long run. Visually it gives a similar effect to the user, but not to the editor, and I find it much easier to draw up my plan in photoshop, slice and tabulate it to see how it looks, and then convert over to CSS. This three-step process takes no time at all, and allows you to nip & tuck anything needed. Compression of HTML through simple means of cleaning up your code and replacing redundant code is a legitimate and required step in the web creation process.

...My two-cents.

Seems that you have learnt nothing during these 8 years.

Tables for page layot? This is enough to ensure that I`m right.