| Now, Let's continue with Part 2. We will discuss the | | | | page. So, the header, right bars, left bars, main |
| following here: | | | | content areas and footer are inside of a table. This |
| Creating tables | | | | slows down the loading of the page as the browser |
| Using CSS boxes as webpage layout | | | | will have to complete first the table before it will |
| Here's how: | | | | display the content. Your visitor may have already |
| Creating tables | | | | left before your page could be displayed. If you |
| Tables are very useful in the presentation of data. | | | | prefer to use table as your layout, you have to avoid |
| The following are the html tags to be used to create | | | | using big tables. You better use small tables to allow |
| a basic table: | | | | the browser display your page little by little but |
| Single-column table: | | | | faster. |
| ‹table width="400" border="1" cellspacing="2" | | | | Though table could still be used, W3C requires CSS |
| cellpadding="4"> | | | | boxes to be used for layout instead of tables due to |
| ‹tr›‹td›row 1 data‹ | | | | the issue of accessibility. CSS boxes load faster than |
| td›‹/tr› | | | | tables. These could be controlled within the style |
| ‹tr›‹td›row 2 data‹ | | | | sheets that could be within the head tags or in |
| td›‹/tr› | | | | separate CSS file. The most critical part in css boxes |
| ‹/table› | | | | is the positioning. So, I'll explain to you the positioning |
| Type the above in your mywebpage.html within the | | | | properties of these boxes, based on my |
| body tags, save and refresh your browser. That's | | | | experience:position: absolute - You have to define the |
| the table on the web. Referring to the above html | | | | x-axis and y-axis as point of reference of the corner |
| codes, width refers to the width of the whole table | | | | of the box. x-axis is either left or right and y-axis is |
| (you may also use pixel here like "800"), border is the | | | | either top or bottom. You have to define also the |
| outside line or outline of the table, cellspacing is the | | | | width or the left and right margin or padding of the |
| space between the cells, cells are the area where | | | | box. The box is not affected by the preceding or |
| the data are located, cellpadding is the space | | | | subsequent boxes. Likewise, the boxes preceding or |
| between border and cells. You may change the | | | | following the boxes that are positioned as absolute |
| values of these table attributes or properties based | | | | are also not affected.float: left or right - You need to |
| on your preference or requirement. | | | | fix the width. You also need to select if left or right. |
| Though the above table html codes are still working, | | | | The box will lean on the side you selected. It will lean |
| W3C.org requires the table properties or attributes | | | | on the box preceding it if there is enough space for |
| be defined in the style sheets or CSS. Using CSS, the | | | | it. This is affected by the other boxes except for |
| above table properties could be presented as follows: | | | | the absolutely positioned boxes.no position or position: |
| Within style tags in the head: | | | | static or fixed - This follows the normal flow. This is |
| .type1 {width: 400px;padding: 4px;margin: 2px; | | | | also affected by the other boxes except for the |
| } | | | | absolutely positioned ones. You need to define the |
| .border {border: 1px solid #000; | | | | width or the left and right margin. |
| } | | | | Now, see the illustration below that will create 5 |
| Then, within the body tags: | | | | boxes, namely: headerbox, leftbox, centerbox, |
| ‹table class="type1 border"› | | | | rightbox and footerbox. These are liquid boxes, which |
| ‹tr›‹td›row 1 data‹ | | | | automatically adjust in width when the display |
| td›‹/tr› | | | | window size of the computer is changed: |
| ‹tr›‹td›row 2 data‹ | | | | ‹style type="text/css"›body {text-align: |
| td›‹/tr› | | | | center;margin: 1px; |
| ‹/table› | | | | } |
| Looking at the codes, "type1" is preceded by dot (.), | | | | #headerbox {width: 100%;height: |
| meaning it is a class selector. For the next type of | | | | 15%;background-color: #9cf;border: 1px solid |
| table properties or attributes, you may label it as | | | | #00f;padding: 0px 0px 0px 0px;margin: 0px 0px 0px |
| type2, then type3 and so on or with other names | | | | 0px; |
| you prefer. "border" is also a class selector and | | | | } |
| "border: 1px solid #000" is the thickness (1px), border | | | | #rightbox {float: right;width: 20%;margin-top: |
| type (solid) and color (#00f) of the border. There are | | | | 5px;text-align: center;background-color: #cff;border: |
| more discussions of CSS in "Creating CSS boxes as | | | | 1px solid #00f;height: 100%; |
| web page layout" and in "Using CSS in styling your | | | | } |
| web pages" | | | | #leftbox {float: left;margin-top: 5px;width: |
| If you want to try the above, then type the codes | | | | 20%;text-align: center;background-color: #cff;border: |
| within the style and body tags as noted, save it and | | | | 1px solid #00f;height: 100%; |
| refresh your browser. It must be the same as the | | | | } |
| first one. | | | | #centerbox {width: 99%;margin-top: 5px;text-align: |
| Now, let's make a 2-column or multi-column table: | | | | center;background-color: #cff;border: 1px solid |
| ‹table width="400" border="1" cellspacing="2" | | | | #00f;height: 100%; |
| cellpadding="4"› | | | | } |
| ‹tr›‹td›row 1 data 1‹ | | | | #footerbox {width: 100%;text-align: center;height: |
| td› | | | | 15%;vertical-align: middle;margin-top: |
| ‹td›row 1 data 2‹ | | | | 5px;background-color: #9cf;border: 1px solid #00f; |
| td›‹/tr› | | | | } |
| ‹tr›‹td›row 2 data 1‹ | | | | ‹/style› |
| td› | | | | ‹/head› |
| ‹td›row 2 data 2‹ | | | | ‹body› |
| td›‹/tr› | | | | ‹div id="headerbox"›HEADERBOX |
| ‹/table› | | | | content area‹/div› |
| Type the above in your mywebpage.html within the | | | | ‹div id="leftbox"›LEFTBOX content |
| body tags, save and refresh your browser. That's | | | | area‹/div› |
| the 2-column table on the web. To add a column, | | | | ‹div id="rightbox"›RIGHTBOX content |
| just insert ‹td›‹/td› after | | | | area‹/div› |
| ‹/td›. 1 ‹td›‹ | | | | ‹div id="centerbox"›CENTERBOX content |
| td› is one column, 1 ‹tr›‹ | | | | area‹/div› |
| tr› is one row and 1 ‹table›‹ | | | | ‹div id="footerbox"›FOOTERBOX |
| table› is one table. | | | | content area‹/div› |
| Now, lets make a table with 1 main heading and 3 | | | | ‹/body› |
| subheadings: | | | | First, you type the above html codes to you |
| ‹table width="400" border="1" cellspacing="2" | | | | mywebpage.html within the head, style and body |
| cellpadding="4"› | | | | tags as noted in the above. Then, save it and refresh |
| ‹tr›‹td colspan="3"›Main | | | | your browser or open the file with your browser. Are |
| Heading‹/td›‹/tr› | | | | you seeing the headerbox on the top, the leftbox, |
| ‹tr›‹td›Subheading 1‹ | | | | rightbox and centerbox in the middle and footerbox |
| td› | | | | at the bottom? Try to change the width of your |
| ‹td›Subheading 2‹/td› | | | | browser window. See? The width of the boxes are |
| ‹td›Subheading 3‹ | | | | also adjusting and that is excellent as your page will |
| td›‹/tr› | | | | auto-adjust depending on the browser window size |
| ‹tr›‹td›row 1 data 1‹ | | | | of your visitors! That is because I used %s in |
| td› | | | | defining the width of boxes. |
| ‹td›row 1 data 2‹/td› | | | | Now, let me explain the above codes for creating |
| ‹td›row 1 data 3‹ | | | | boxes as your layout.headerbox - preceded with #, |
| td›‹/tr› | | | | meaning it is an id selector and could be used only |
| ‹tr›‹td›row 2 data 1‹ | | | | once per page; float: left means the box will lean on |
| td› | | | | the left if fit; width: 100% means the box is 100% of |
| ‹td›row 2 data 2‹/td› | | | | the browser window and that is the reason why it is |
| ‹td›row 2 data 3‹ | | | | liquid; height: 15% means the box is 15% of the |
| td›‹/tr› | | | | browser window; text-align: center is the alignment of |
| ‹/table› | | | | the objects or characters inside the box; |
| Type the above in your mywebpage.html within the | | | | background-color: #9cf is the color of the space |
| body tags, save and refresh your browser. See? | | | | within the box; border: 1px solid #00f is same as |
| Yes, just use colspan to merge the columns. To | | | | discussed in Creating Tables.rightbox - same |
| merge 2 columns, use colspan="2" and for 3 columns, | | | | explanations in the above except for the float: right |
| use colspan="3" and so on. | | | | which means the box will lean on the right and |
| If you want to merge rows, use rowspan instead of | | | | margin-top: 5px is the distance from the bottom line |
| colspan. See this example: | | | | of the box above (headerbox).leftbox - same |
| ‹table width="400" border="1" cellspacing="2" | | | | explanations in the above.centerbox - same |
| cellpadding="4"› | | | | explanations in the above except that it has no |
| ‹tr›‹td rowspan="2"›merge | | | | position defined, meaning it will follow the normal. It |
| row data‹/td› | | | | will fit itself based on the available space. This will be |
| ‹td›row 1 data 2‹ | | | | its 100% or full size. More than this limit will distort |
| td›‹/tr› | | | | the box alignment.footerbox - same explanations in |
| ‹tr›‹td›row 2 data 2‹ | | | | the above except for the vertical-align: middle, which |
| td›‹/tr› | | | | means that the objects or characters inside the box |
| ‹/table› | | | | will be vertically-aligned in the middle. |
| Now, type the above in your mywebpage.html within | | | | Try changing the values of the values of the css |
| the body tags, save and refresh your browser. Now, | | | | boxes above, then save. Refresh your browser and |
| you see that 2 rows in your first column were | | | | familiarize yourself with the effect of each change. |
| merged. | | | | Please note, however that there may be minor |
| Try creating your own table using different values to | | | | differences if the above css boxes are displayed with |
| familiarize yourself in manipulating tables. | | | | browsers other than internet explorer like firefox and |
| ‹b›Creating CSS boxes for web page | | | | opera. |
| layout‹/b› | | | | Continue with Part 3. |
| Before, tables are being used as layout of a web | | | | |