Planning to create a table
- Sketching the design
- Sketch out the page to determine how you want it to look
- Can be a rough sketch (see Using Tables to Create Web Pages for full explanation and illustrations)
Superimposing a table plan
- Using tables and cells to partition the content on the sketch
- Try to determine heights and widths of cells, columns, rows, tables
- Table 1 is the large table used to set the page dimensions.
- 750 x 550 pixels
- Everything is enclosed in this table.
- This one has two rows and two columns, or four cells.
- The top row is complete, with cells for the logo and title GIF, so no nested tables are needed.
- The second row will need nested tables
- One in cell 3 to place a nav bar table.
- Two in cell 4 for art and text.
|
 |
- Table 2 has 5 rows and is inserted at the top <valign="top"> of cell 3.
- Each row of Table 2 contains a navigation button or text.
- Table 3 divides the fourth cell of Table 1 into two sections (rows), one for the art and another for the text.
- Table 4 is placed in the bottom row of Table 3 and has one row and two columns (cells).
- The text will be positioned inside each column, or cell.
|
- Translating plan to table
- Creating tables
- Outside table (Table 1) controls the page width:
- 750 pixels will fit the page into the browser screen on a computer monitor with 800 x 600 ratio.
- Most tables are not visible on the Web page.
- <table width=750 border="0">
- Every table must have at least the row code <tr> followed by the cell code <td>.
- Closing tags are in opposite order.
- Nested tables
- Use graph paper to estimate number of pixels needed for the width of each table and column (cell).
- Width can also be set in percentages, when controlling exact width is not imperative.
- Close off tags in exact opposite order.
- Basic table and cell attributes
- Width height : of a table or cell
- Align (left, right, center): horizontal alignment
- Valign (top, bottom, middle): vertical alignment
- Borders (visibility, width, color): line around table or cell
- Background color, art
- Cell spacing (space between cells), cell padding (space between border and cell contents)
|
|
- CSS for webpage layouts
- Recap: What is CSS: Cascading Style Sheets
- a style sheet language used to describe the presentation semantics (look and formatting) of a document written in a markup language
- enables the separation of document content from presentation, including elements such as the layout, colors, and fonts.
- Divisions
- Block-level HTML element used to define sections of a HTML file
- Divisions vs. Spans
- Spans
- Inline elements styling certain areas of text
- Common CSS Rules For Layouts
- float: positioning element to the left or right, so that other elements can wrap around it (right, left or none)
- Important for columns in layouts
- clear: specifies which sides of an element other floating elements are not allowed (right, left or both)
- display: specifies how an element is displayed (inline, block, table, none etc.)
- height: height of an element
- width: width of an element
- padding: clears an area around the content
- margin: clears an area around the border from other surrounding elements
- position: type of positioning adopted by element in relation to other elements including the browser window (absolute, relative, static or fixed)
- CSS Box Model
- CSS Selectors: Differentiating between elements in an HTML page
- Selectors: ID (aka Identifiers)
- Can only be used for 1 element within each (X)HTML document (i.e. unique identifier)
- Denoted with a “#” (eg. #header)
- Selectors: Classes
- Can be used for multiple elements within each (X)HTML document (i.e. Many elements can share the same class)
- Denoted with a “.” (eg .redemphasis)
- Similar to inline styles
- What happens with HTML tables?
- You can use CSS on its own
- You can combine CSS with tables
- Through styling entire tables or parts of tables
- Applying inline styling or even external stylesheets
- Warning: Because of how different browsers render html and css, they may not always look the same.
- Internet Explorer is notoriously problematic (across all versions) when rendering CSS for layout. Even between different versions of IE.
- More Resources
- Homepage Plan Exercise
- Rough sketch of homepage design in pencil
- Table plan or CSS sections in colour pencils or pens
- Use different colour for each table or section
- Do NOT staple plan to justification
- Instructor will go over your plan, offer feedback and return plan to you in lab
- More on CSS
- Common CSS rules
- Fonts & Text
- font-style, line-height, text-align, font-weight, letter-spacing, font-family, word-spacing, color, text-decoration
- Page Layout
- padding, position, overflow, visibility, margin, clear, z-index, display, height, width, float
- Backgrounds
- Background-repeat, background-color, background-position, background-attachment, background-image
- Images
- border-style, border-color, border-width,
- CSS Pseudo Classes
- Useful for links
- Usually suffixed to selectors for anchor tags
- a:visited, a:active, a:focused
- a:visited{color:#000000;}
- links that have been visited are now black in colour.
- Suggestions for how you can use CSS in tables:
- Styling individual rows, columns, cells
- Using classes to give a common style to all cells that you want to give a similar appearance.
See also Designing Websites with Tables
Back to top
Back
to Lectures Index. |
Lectures
> Web Page Layouts
