Page 1   Page 2   Page 3   Page 4   Page 5   Page 6  

Learning more about Word Wrap.

Go back to your Notepad page and make the changes shown in Figure 7 and see for yourself how Tables behave.

In Figure 7 and Figure 8 notice that the largest item in any single column determines the width for that column.

In Figure 8 I switched the words in the third cell, and pasting them into the first cell of Row One, this forced the Table to create a larger first column. If were to type different things in each data cell, the eventual outcome would look something like Figure 8. Once again, the nature of the column of data is to expand to the size of the largest data cell in that column.

Figure 7 Tables can adjust its Column size.

Figure 8 Table cells adjust to fit the Data source.

I know what you are thinking, there has to be a way to control this feature, and there is! We’ll cover that next.

As you can see for yourself, something has to be done to correct this little difficulty. The problem came from not telling the Table Data cell how large to be. It could have been corrected within the Table flag as well. Let’s go back to our Table flag and add a WIDTH attribute.

We can tell the Table to be exactly a certain size, that would be called Absolute size or we can tell it to be a percentage of the computer screen, which would be called Relative size. We’ll practice both and you’ll know for yourself soon. In your Notepad add this to the Table flag: < TABLE BORDER="3" WIDTH="90%" >.

Figure 9 Table in Absolute Size of 200 pixels.

Check the results, then change the WIDTH="90%" to WIDTH="200". You should see the same dramatic results shown in Figure 9.

Now if we set the individual Data cells to a specific size we may have yet more control over this Table. Make the changes shown in Figure 10 to your coding for this Table, this time we will set all the < TD > cells to the same size.

Figure 10 Source code for an Absolute Table 600 pixels wide.

For this example, I’ve chosen to create an Absolute Table of 600 pixels wide. This is placed inside the TABLE tag. Then I added a WIDTH attribute to each of the six (6) Data cells, I made these Absolutely 200 pixels wide. All things being equal, it ought to be a Table of equal sized columns, and of course it is.

I could have set the Table in Relative terms as well, let say I use 90% as a Table Width and 30% as Data Cell Widths, it will work in the same way, but it will be larger since it will be 90% of the screen instead of only 600 pixels wide.

On the next page we’ll learn how to space our words in the table.

Page 1   Page 2   Page 3   Page 4   Page 5   Page 6   TOP

Back to LAB     Back to TOC