Chapter 12 Tables Outline Goals and Objectives Chapter Headlines Introduction Table Structure and Variables Table Layout and Design Using Tables Table Rendering and Calculations Nesting Tables Formatting via Tables Summary
Chapter 12 - Tables 2 Goals Understand tables structure, creation, control, their use for data Understand tabulation and organization, and their use in formatting web pages and controlling content location in pages and Goals and Objectives Objectives Structure and variables Layout design Rows and columns Headings and cells Rendering Nesting Tabulating data Formatting via tables
Chapter 12 - Tables 3 Chapter Headlines 12.1 Introduction Make web pages stand out with using tables 12.2 Table structure and variables 12.2 Table Learn how to control tables and their look 12.3 Table layout and design 12.3 Table Table layout makes a difference 12.4 Using Tables 12.4 Using XHTML makes using tables easy 12.5 Table rendering and calculations Be aware of what web browsers do 12.6 Nesting Tables Allows you to format web pages 12.7 Formatting via Tables How to control web page layout
Chapter 12 - Tables 4 Introduction Tables organize and structure page content Tables organize They offer great flexibility in controlling the layout They great controlling A table has rows and columns of cells table rows Writing code using tables is different from writing code without using tables code Chapter 12 - Tables 5 They can be broadly classified as: Cell variables – control Table Structure and Variables
properties of individual cell Non-cell variables – control properties of table Examples: Non-cell variables Caption Summary Border Header Rows and Columns Width and Height Cells and Rules
Chapter 12 - Tables Cell variables Row span Column span Cell padding Cell spacing Alignment 6 Table Structure and Variables Chapter 12 - Tables 7 Table Layout and Design Layout and design depend on purpose of using tables Layout depend Tables may be used for the reasons listed below Data tabulation Web page formatting Tables may or may not use heading and different cell Tables properties depending on its purpose properties Table size must be adjusted such that scrolling is avoided Table scrolling Chapter 12 - Tables 8 Table Layout and Design Chapter 12 - Tables 9 Using Tables Five important tags are: <table> - Encloses all other table tags Attributes: Summary, width, height, border, align, cell Summary, spacing and padding spacing <caption> - Assigns a title to the table Assigns Attributes: Align <tr> - Creates a table row Creates Attributes: Align, valign <th> - Creates a header row Creates Attributes: abbr, headers, rowspan, colspan, align, valign <td> - Creates data cells Creates Attributes: abbr, headers, rowspan, colspan, align, valign
Chapter 12 - Tables 10 Using Tables Example 12.1: Use Tables Create different tables using the <table> tag and its attributes Create <table> tag Chapter 12 - Tables 11 Using Tables Example 12.2: Use variable size table cells Tables with cells that span multiple rows and columns Chapter 12 - Tables 12 Table Rendering and Calculations Every table, cell and its content must be displayed Every properly in the browser properly The following are the rules that browsers follow to The render and calculate table and cell parameters: render Calculating table height and width Calculating table Calculating the number of columns in a table Calculating number Calculating the size of a table cell Calculating size Calculating cell spacing and padding Calculating cell Inheritance of alignment specifications Inheritance alignment Chapter 12 - Tables 13 Nesting Tables Table nesting is used to control formatting Table used Table nesting makes coding difficult Table makes A table is nested by have a table inside another table’s table cell cell Tables can be nested by using a <table> tag after <td> <table> Tables after <td> tag of a cell tag Tables can be nested to create multiple levels Tables multiple Sometime this may produce awkward results Sometime may When nesting tables, the design should be taken care of When wisely wisely
Chapter 12 - Tables 14 Nesting Tables Example 12.3: Use nested tables Create tables within the cells of other tables Chapter 12 - Tables 15 Formatting via Tables Formatting web pages using tables has the same idea as Formatting that of nesting tables that A web page layout is divided into regions web divided Then a table or a cell is substituted for each region Then table Even formatting web pages using tables can involve the Even use of nested tables use Chapter 12 - Tables 16 Example 12.4: Formatting with tables Format a web page using tables to create a good layout Formatting via Tables Chapter 12 - Tables 17 Summary
• • • • • • • Tables organize and structure web pages Tables organize There are table-level and cell-level variables There table-level cell-level The purpose of using a table determines its layout and The design design There are 5 important tags to use tables There important Table calculations and rendering is important because of the number of different parameters involved the Tables can be nested for better structure Tables nested Table are extensively used for formatting web pages Table used Chapter 12 - Tables 18 ...
View Full Document
This note was uploaded on 07/01/2011 for the course COMP 103 taught by Professor Mulhimaldoori during the Spring '11 term at American Dubai.
- Spring '11