Creating Tables in a Web Site HTML 4 Created by S. Cox

Creating Web Pages with Tables Tables allow you to organize information on a web page using HTML tags – Tables are useful when you want to arrange text and images into rows and columns in order to make the information straightforward and clear to the web page visitor – You can create tables that are newspaper-type columns of text or structured lists of information – Tables can be complex, using rowspan and colspan attributes, background colors in cells, and borders or tables can be simple with basic grid format and no color – The purpose of the table helps to define what information is appropriate

Table Elements Row – horizontal line of information Column – vertical line of information Cell – intersection of a row and column Heading cell – displays texts as bold and center-aligned Data cell – displays normal text that is left aligned

Heading Cells Rows Columns Data Cells Table Header

More Table Elements Table border – line that encloses the perimeter of the table Table header – same as a heading cell; any cell with bold text that indicates the purpose of a row or column Table caption – descriptive text located above or below the table that further describes the purpose of the table

Steps for Planning, Designing, and Coding a Table 1.Determine if a table is needed – Not all web pages need tables – Tables are useful for a structured, organized list of information or includes text and images that must be positioned in a very specific manner VERSUS

Steps for Planning, Designing, and Coding a Table 2.Planning the Table – Sketch on paper before coding 3.Coding the Table

HTML Table Tags TagFunction Indicates the start and end of a table All other table tags are insert in between these tags Indicates the start and end of a table row Rows consist of heading or data cells Indicates the start and end of a table heading (heading cell) Table headings default to bold text and center alignment Indicates the start and end of a data cell in a table Data cells default to normal text and left-alignment

HTML Table Tag Attributes and Functions