Design & Publishing . / . WEB . / . Features . / . Joyce Evans on "Tables"

.

Tables are wonderful layout tools, they enable us to position elements on a page. I'm sure you've seen plenty of pages that the text runs from one side of the screen to another. If you have followed any of the reviews here than you've heard me say plenty of times, "put your text into a smaller table". In fact that is what motivated this article. We'll start with some real basic code. I'll use code because I could not begin to guess what editor you are using to write code for you. My preference is Dreamweaver but it is quite costly. Notepad works just fine. So even if you have no editor you can use Notepad. I suppose you could use Front Page Express which comes with Windows 98 but it adds its own proprietary code and your server has to support it. So rather than deal with these kind of things I will just give you the code. It's a good idea to understand the code anyway. No matter which editor you use there are always problems which crop up. If you don't know how to code it will be very difficult to evaluate and fix any problems. There are tons of great and free tutorials all over the Internet. Of course you could always pick up a Book. The easiest book I've found for the extreme beginner is HTML simplified by IDG Books Worldwide. It is done step-by-step and picture-by-picture. If you are a bit more advanced than that then pick up one of Lynda Weinmans web design books. Whenever you want a table you begin with an opening table tag <TABLE> within the table is <TR> A table row <TD> Table data (equivalent to a column) Now each of these need to be closed, the / is in the closing tags. </TR> end table row </TD> end table data </TABLE> end table If you want alignment add one of these tags before your table <div align="center"> <div align="right"> <dive align="left"> Then at the end of the table, after you put you end table tag add a: </div> end divide You can put tables inside of tables also, but that is for another time. Today we are simply looking at the basic table to display text so that it is readable. We'll look at two different options. The set width table and the expanding table. When you use a set width you first determine the size you want. There are many different opinions on this topic, especially with all the new emerging technologies right now. But 580 to 600 pixels seems to be the middle ground for a table that is viewable on the majority of monitors. I've made a fixed width table of 600 pixels and a couple of different percentages for you to compare. Most of the samples include the code, we'll even look at a table with a colored background. Feel free to copy and paste any code you'd like to use. Here is 600 pixel wide table centered. It looks quite different on these two sizes, but it is still acceptable with these resolutions.
17 inch 1024 x 768	Laptop at 600 x 800
Code: <div align= "center"> <TABLE width="600" border="0"> <TR> <TD> All your text would go here </TR> </TD> </TABLE> </DIV> If you want a border than change the 0 to a number, but be careful of too much. Notice that a set width of 600 isn't bad at all, it even fits on a laptop at 600 x 800 resolution. But see below what happens if someone has a smaller screen size set at the 640 x 480 default of many monitors. It fits and looks close to 100% but if the fixed size was any bigger you'd have to scroll to the right.
Laptop 640 x 480 Table is 600 pixels wide
Here is a 100% table, it looks exactly the same on all monitors so I won't put two here. The text runs from one side to the other of the entire screen, yuk! This is so hard to read. This looks so bad I won't even include the code. Besides an awful lot of people already know how to do this. 17 inch 1024 x 768
Here is 80% 17 inch 1024 x 768	Laptop at 600 x 800
As you can see the percentage tables look great on either size. The table will adjust to whatever size monitor it is being viewed on. But be sure not to put images in that are more than 500 or so pixels or you could encounter problems with sizing. Let's say you put in an image that is 800 pixels wide, and you use 70%, it will still force a small monitor to scroll to the right because of the image size. To see what happens click here to go to see a separate page. If I put it here it would force this whole page to be 800 pixels wide. Code: <div align= "center"> <TABLE width="80%" border="0"> <TR> <TD> All your text would go here </TR> </TD> </TABLE> </DIV> I personally like 70 percent, but here I also included a colored table. Notice anything wrong?
17 inch 1024 x 768	Laptop at 600 x 800
If you guessed that the text right on the edge of the color has no border than you are correct. We'll fix that in the next illustration. But if you notice the yellow on the 17 inch high resolution looks just as good on the smaller laptop and lower resolution.
Code: <div align= "center"> <TABLE width="70%" border="0" bgcolor="#FFFFCC"> <TR> <TD> All your text would go here </TR> </TD> </TABLE> </DIV> Here is the 70% colored table with a cell pad of 20. If you want larger margins then increase the cell pad size. This keeps the text off the edges which also looks bad
17 inch 1024 x 768	Laptop at 600 x 800
Code: <div align= "center"> <TABLE width="70%" border="0" cellpadding="20" bgcolor="#FFFFCC"> <TR> <TD> All your text would go here </TR> </TD> </TABLE> </DIV>
There you have the basic table facts. There are tons more that can be done with tables. Send any requests to me or if you need a quick answer to a table question join the Cafe Discussion and I'm sure you'll get a speedy answer. I had a question today and received an answer within 3 minutes! Bon Appétit! Joyce Evans Idea Design.  Please also see Maria Langers "Tables with PageMill"