Creating Tables in a Web Site

HTML 4Created 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

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

Tag Function<table></table> Indicates the start and end of a table

All other table tags are insert in between these tags<tr></tr> Indicates the start and end of a table row

Rows consist of heading or data cells<th></th> Indicates the start and end of a table heading (heading cell)

Table headings default to bold text and center alignment<td></td> 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 FunctionsTag Attribute Function

<table></table>

align Controls table alignment (left, center, right)

bgcolor Sets background color for table

cellspacing Defines the space between cells in pixels

cellpadding Defines the space within the cells in pixels

cols Defines number of columns

width Sets table width relative to window width

<tr></tr>

align Horizontally aligns rows (left, center, right, justify)

bgcolor Sets background color for row

valign Vertically aligns row (top, middle, bottom)

<th></th>And<td></td>

align Horizontally aligns cells (left, center, right, justify)

bgcolor Sets background color for cell

colspan Sets number of columns spanned by a cell

rowspan Sets number of rows spanned by a cell

valign Vertically aligns cell (top, middle, bottom)