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