Upload
annis-white
View
215
Download
0
Tags:
Embed Size (px)
Citation preview
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