CAFE JORVAN
The best Vietnamese and Penang food in town. Everything under one roof ...
Menu 1
Menu 2
Menu 3
Menu 4
 
 
Hello Cloudy~!!! ;) Welcome to our mini-cafe page. Hik, there're no drinks here to offer, only to show you how we can use the "margin" attributes and "table" tag to make a design for a webpage. ;) Although you have learned these things earlier, but I have only taught u how to make margins and tables. Now, I'll teach u how to use both to create a layout for a HP. (Always refer coding to understand better)

As you can see here, I use a table for the entire page, but u can't see the table coz I put the margins as "0" and I make the table border="0". The purpose of the table tag here is not to show ppl the table, but to utilize the tag to design a layout. ;) The top part is the theme of this page(first row of table), where we use the "tr" tag to create. We specify the height of the row. (Take note that I have divided the percentages into three rows accordingly, the theme (first row) is 23%, the black line (second row) is * (the balance) and the third row is 75%. You have to put every one of the percentages in their respective "td" tags. See coding.)

Then, on the third row, I put the menu , this writing area, and the black part on this right side. Here again, I've separated the row into 3 parts: 20%, 72% and 8% (that's why the first row I put "colspan=3"). In the menu's "td" tag, I've put another table. This smaller table is to create the menu itself, and it has it's own percentage measurements. It's better to create an independent table for the menu coz if we need to add things there, we only need to change this small table and not the main table of the page. All the things in menu u can make them into links too. The white color writing area where u are now reading, I put it as 72% so that I can have more writing space. ;) And the black column on ur right is for designing only, doesn't mean anything. ;) If you noticed, I've used a few colors as "bgcolor" for the "td" tags. Here, I played with the colors to create the design, and u'll soon learn that colors alone is powerful enough to give an impact to a page, not necessarily pics/images. ;) But, avoid using too many colors. Use only a few that is in the same type and can match one another well.

If you see the coding, u may wonder the reason I put together "&", "nbsp" and ";". Well, when we combine the three, we get a "space", and we can repeat it many times. It's better that we put this word inside "td" tags that has no words, so that the tag will work well. ;) OK dear, the rest of coding I'll let u review urself. So far, most of the things here I've taught u already. So, now u know how we can use simple tags to make many designs right? ;) Hik, you can be more creative and design better ones dear~!!! ;) OK, that's all for this page, we move on to next Tutorial.
I LOVE YOU~!!! :*