HTML Tables are based on an invisible table consisting of rows and columns. There some tags associated with HTML tables:
- table tag - which is the starting point of the table.
- tr tag which represents a table row.
- td tag which is indicates a table cell and stands for table data. Within the td tag text, numbers or an image tag is placed.
- th tag is a tag used to assign column headings. Text within the th tag is both bold and centered.
Indenting table tags helps see when there are mismatched tags.
Formatting Table Borders
Table borders are formatted using the border property for which you can specify the width of the border in pixels. The border style cannot be changed. The only way to change a border is to use a style sheet.
To create a different style border line on a table:
- Create a borderless table.
- Apply a border using the tr and table tags.
There is one problem when constructing tables withs borders. An empty table cell will not get any border at all; this is known as collapsing. Collapsing can be prevented using a single non-break space.
Text alignment, padding, margins, colors and background images can also be changed using style sheets.
HTML tables consist of a cell that reaches over rows and columns. This is know as spanning. A columnspan property can be added to a td tag to create a cell that reaches over two or more columns. The rowspan property is used in the same way except that cell area extends over rows and not columns.
Dreamweaver has a menu command called Merge Cells to joins cells together.
Sizing and Aligning Tables
If the columns are not defined in a table then the column as wide as the longest text line or to adapts to size needed to hold an image (an image tag is needed). Tables enlarge to fit all columns however it does not adapt in a way that would result in the table growing outside of the browser window.
More space can be added to tables using style rules. When padding is increased for the td and tr tags the result is more space between cell contents and borders. The margin width for the td and tr tags enlarges the space between cell borders and adjacent cells.
There are two ways to size tables:
- Relative sizing where sizing is based on the dimensions of the browser window and is expressed by percentages.
- Absolute sizing where pixels are used to create the exact size of the table.
Column sizing the width property and td and th tags are used and are expressed by either proportions, percentages or exact pixels. When percentages are used they are used to define the percentage of the table the column will fill space wise. The column's width percentage does not need a specification of value in more than one column since the browser will resize and fill in the remainder of space in the table. When including the percentages for all columns be sure that they add up to 100 percent. To size columns a style rule using a class name is also required since a table column can have a differing width from other columns in the table.
To size a row the height property is used with the tr attribute. Percentage and pixels are used to express the value. Resizing a row will result in a change to each and every cell in all columns.
Organizing a Page with Tables
Tables are used to organize your Web site by diving the page into various regions. The most common designs are the two or three column layout. The navigation bar is usually on the left. The middle column is the greatest amount of space for main content. A right column contains another set of links, advertisements or supplemental information.
Style-Based Layout
Style-based layout is better than a table-based layout because the structure of a table based layout needs to copied to each page of a Web site. Style sheets can apply the style layout of an entire Web site using only one separate style sheet. Style sheets are easier to read as well. Changes to a single style sheet can modify the layout of each linked page on a Web site.
Nest tables are tables placed within tables. To design the attributes within nested table the table must be defined. The simplest way to resize a nested table is to use a relative size of 100 percent.
All the content of a table is done using a div tag where a class name is selected to describe the content.
Even Better Selectors
Contextual selectors match a tag within another tag. A contextual selector is constructed by placing a space between the two tags. They are particularly useful when used to match a specific type of tag within a specific type of class. Contextual selectors are simplify the process of defining formatting rules for the various page sections.
The id selector is very similar to a class selector in that the id selector allows you to pick a name describing your rule. Instead of using a period the tag name is separated using a hash mark (#). Just like class rules, id rules are only applied when indicated within your HTML. An id attribute is used to turn them on instead of class attribute. Only a single tag in a page can exist within a given id.
Floating Boxes
Relative positioning results in elements ordered based on their appearance within a document. Richer layouts are accomplished by positioning content in different ways. One example is a floating layout.
Absolute Positioning
Style sheets allow for elements to be fixed on a page. Absolute positioning is done by setting the position property of the division tag to absolute. The location of the division tag is then set using the top, left, right and bottom properties.
To create style based layouts you divide your Web page into a series of separate regions. A division tag is placed next to every region with a different class. Then the rules for the style sheet rules which position and format each element are written.
Layering
Sometimes elements on a Web page are overlapped intentionally to create a dramatic effect. This is done using overlapping layers. Web browsers need to know which element will be on the top layer. Using a simple number known as a z-index achieves the layering effect. An element with a higher z-index number is placed over that of a lower z-index number.
Helpful Style Sheet Web Sites:
- Style Sheet Basics- www.w3schools.com/css
- Style Sheet Examples - Layout Reservoir www.bluerobot.com/web/layouts and Glish http://glish.com/css
- Examples of Style Sheets- http://www.csszengarden.com/
- Advanced Style Sheet Resources- www.westciv.com/style_master/house
No comments:
Post a Comment