HTML EssentialsTables and Table

Tags

Overview

• Use of Tables goes beyond tabulating data

• Frequently used to format Web pages / control layout

• Especially used by formatting programs

Introduction

• If web page is simple, formatting is not an issue

• .Can use frames to divide windows ( haven’t spoken about yet )

• .Table is region with rows / columns• Called cells

• Arranged relative to each other

• Holds own data

• Can be any text, image, etc

• Can be hyperlinks, lists, colors, sounds, etc

• A cell can hold another table

Introduction

• HTML editors use tables a lot to format pages

• Can actually determine if developed simply or created from program because of this

• If code has multiple tables – possible

• HTML supports more traditional use of tables – tabulating #s

Table Tags

• Tables start and end with < table > and < /table >

• Each table must be terminated, otherwise all following text is thought to be a table

• Has several attributes

Table Tag Attributes

• WIDTH / HEIGHT: used to specify size of table

• If not specified, defaults to screen size or contents: whichever is smaller

• ALIGN: Center, left ( default ), or right

• BORDER: specifies thickness in pixels

• Needed to show lines ( with no argument )

• Default is 1px

• Surrounds both table and cells

• Use either BORDER or FRAME / RULES ( but not both )

Table Tag Attributes

• CELL SPACING: amount of space between table cells and table cells and sides of table

• CELL PADDING: between contents and borders

• BGCOLOR: background Color ( no color is default )

• BACKGROUND: will display an image in the background

Table Tag Attributes

• When NOT using the border attribute, you can use ( together or separately )

• FRAME: specifies visibility of sides of frame that surrounds table – Major border• VOID: no sides shown

• ABOVE: top side only

• BELOW: bottom side only

• LHS & RHS: corresponding side only

• VSIDES & HSIDES: top and bottom sides only

• RULES: which rules are shown – not major border• NONE

• ROWS

• COLS

• ALL ( default )

Table Subordinate Tags

• A< caption > may accompany a table

• Assigns caption / title to table

• One attribute – ALIGN

• TOP, BOTTOM, LEFT, RIGHT

• Default is TOP

Table Subordinate TagsTable Rows

• The < tr > and < /tr > tags are used to define every row

• Two main attributes

• ALIGN: horizontal alignment of cell content for all cells in row

• Values LEFT ( Default ), RIGHT, and CENTER

• VALIGN: vertical alignment

• values TOP, MIDDLE, BOTTOM

• MIDDLE is default

Table Subordinate TagsTable Cells

• Within each row lie the cells

• Defined by < td > and < /td > or < th > and < /th >

• TH: Heading cells ( text is bold and centered )

• TD: Detail cells ( text is NOT bold nor centered )

Table Subordinate TagsTable Cells

• Attributes

• ALIGN: Aligns text horizontally LEFT ( default ), CENTER, and RIGHT

• VALIGN: Aligns text vertically TOP, BOTTOM, and CENTER

• ROWSPAN: specifies number of rows cell will span

• COLSPAN: specifies number of columns cell will span

• CELLPADDING: applies locally to cell ( overrides global value )

• NOWRAP: disables test wrapping for cell ( bad )

• ABBR: abbreviated form of cell contents for disabled users using speech synthesizers

The End