HTML Tables Tutorial with Notepad

8/9/2019 HTML Tables Tutorial with Notepad

1/25

HTMLTablesHTMLTables

Terry KoluchTerry Koluch

Dan SolarekDan Solarek


2/25

HTML Tables: BasicsHTML Tables: Basics

Tables are commonly used to provide a higher levelTables are commonly used to provide a higher levelof control over how information is displayed on aof control over how information is displayed on apagepage

HTML tables are organied intoHTML tables are organied into rowsrowsandand columnscolumns The intersection of aThe intersection of a rowrowandand columncolumnis ais a cellcell !n HTML" a cell is the basic element that holds data!n HTML" a cell is the basic element that holds data

#te$t" graphics" other tables%#te$t" graphics" other tables%


3/25

HTML TagsHTML Tags

Tables are denoted by a set ofTables are denoted by a set of andand

tagstags

Tables can be nested to any levelTables can be nested to any level &hen nested" you place a second table&hen nested" you place a second table

within a table cellwithin a table cell

Default is for tables to display borders' (ouDefault is for tables to display borders' (oucan use )hidden tables* #i'e'" tables withoutcan use )hidden tables* #i'e'" tables without

borders% to control element alignment withoutborders% to control element alignment without

the information appearing to be in a tablethe information appearing to be in a table


4/25

Rows, Data Cells & HeadersRows, Data Cells & Headers

&ithin a table" we specify a row via a&ithin a table" we specify a row via a

andand tag settag set

&ithin a row" we specify&ithin a row" we specify

+ Data cells via theData cells via the andand tagstags

+ Headers via theHeaders via the andand tagstags

,an have multiple -,an have multiple -tdtd. #or -. #or -thth. % tag sets. % tag sets

within a rowwithin a row

Make sure you have the same number ofMake sure you have the same number of

--tdtd. and. and tag sets in each rowtag sets in each row


5/25

CaptionsCaptions

/se the/se the information


6/25

Row GroupsRow Groups

,an classify a table0s rows into row groups to,an classify a table0s rows into row groups tospecify their purposespecify their purpose

Types of row groupsTypes of row groups+ table headertable header + table bodytable body + table footertable footer

Se1uence important + table header #one setSe1uence important + table header #one setonly% first" table footer ne$t #also one setonly% first" table footer ne$t #also one setma$%" then multiple table body sectionsma$%" then multiple table body sections

/sed for tables that are populated with data/sed for tables that are populated with datafrom e$ternal sources like 2ML documents orfrom e$ternal sources like 2ML documents or

databases' ,an reference programmaticallydatabases' ,an reference programmatically


7/25

A Siple !"apleA Siple !"aple

/se whitespace for clarity in your HML code/se whitespace for clarity in your HML code

/pper or lower case will work' Lower case/pper or lower case will work' Lower case stronglystronglyrecommendedrecommended

,lick,lick herehereto view a very simple table and do a 3iew 4to view a very simple table and do a 3iew 4Source to se the HTMLSource to se the HTML

,omments about the table5,omments about the table5+ Default Header settings are bold" centeredDefault Header settings are bold" centered

+ Default Data ,ell settings are regular weight" left6alignedDefault Data ,ell settings are regular weight" left6aligned+ Default borders for tables are no borders' ! added a borderDefault borders for tables are no borders' ! added a border

tag to show the cell borderstag to show the cell borders

+ Table is 789 of browser width to better show te$t alignmentTable is 789 of browser width to better show te$t alignmentwithin cells #again" ! specified that%within cells #again" ! specified that%
http://cset.sp.utoledo.edu/cset3100/simpletable.htmhttp://cset.sp.utoledo.edu/cset3100/simpletable.htmhttp://cset.sp.utoledo.edu/cset3100/simpletable.htm


8/25

Table BordersTable Borders

:s mentioned on previous slides" default browser:s mentioned on previous slides" default browserbehavior is to not display table borders'behavior is to not display table borders' HereHereis anis ane$ample of a )hidden table*' /se 3iew4Source to seee$ample of a )hidden table*' /se 3iew4Source to see

the HTML' ;ither omit thethe HTML' ;ither omit theborderborder attribute or set itattribute or set ite1ual to 8e1ual to 8 /se/se border=valueborder=valueattribute to specify border sieattribute to specify border sie

wherewhere valuevalue is width in pi$elsis width in pi$els /se the ,ascading Style Sheet #,SS% inline style/se the ,ascading Style Sheet #,SS% inline style

attribute to specify the background color of a table'attribute to specify the background color of a table'&e will cover ,SS technology later in the course'&e will cover ,SS technology later in the course'


9/25

Table #raesTable #raes

>y default" a table border surrounds the entire table>y default" a table border surrounds the entire tableand each cell within the tableand each cell within the table

/se the/se the frame=valueframe=valueattribute to specifyattribute to specify whichwhich

sides of a tablesides of a tablewill have borders wherewill have borders where valuevaluecan becan be+ aboveabove+ only above table+ only above table

+ belowbelow+ only below table+ only below table

+ borderborder+ around all ? sides of table+ around all ? sides of table

+ bobo

+ same as border #default%+ same as border #default%

+ insidesinsides+ on top and bottom sides+ on top and bottom sides

+ lhslhs+ only on left6hand side+ only on left6hand side

+ rhsrhs+ only on right6hand side+ only on right6hand side

+ voidvoid+ no border+ no border

+ vsidesvsides+ on left and right sides+ on left and right sides


10/25

Table RulesTable Rules

/se the/se the rules=valuerules=valueattribute toattribute to

control how gridlines are drawncontrol how gridlines are drawn within awithin a

tabletablewherewhere valuevaluecan becan be+allall+ around cells+ around cells

+colscols+ around columns+ around columns

+groupsgroups+ around row groups+ around row groups+nonenone+ no rules+ no rules

+rowsrows+ around rows+ around rows


11/25

Table Bac$ground ColorTable Bac$ground Color

/se the inline ,SS/se the inline ,SS attribute toattribute to

specify the background color of a tablespecify the background color of a table

asas wherewhere colorcoloris either an HTML color oris either an HTML color or

@A> code@A> code


12/25

T%eT%e rowspanrowspanAttributeAttribute

/se the/se the rowspanrowspanattribute to )spread*attribute to )spread*

data in a single -data in a single -tdtd. #or -. #or -thth.% cell.% cell

across multiple rowsacross multiple rows


13/25

T%eT%e colspancolspanAttributeAttribute

/se the/se the colspancolspanattribute to )spread* data inattribute to )spread* data in

a single -a single -tdtd. #or -. #or -thth.% cell across multiple.% cell across multiple

columnscolumns


14/25

T%eT%e cellpaddingcellpaddingandand cellspacingcellspacing

AttributesAttributes /se the cellpadding=value* attribute to put

whitespace between data in a table0s cellsand the cell borders' !alueis e$pressed inpi$els' >rowser default is C pi$el

/se the cellspacing=value* attribute to putwhitespace between cells' :gain" valueise$pressed in pi$els' Default is pi$els

,an combine both' Hereis an e$ample' /se3iew 4 Source to see the HTML

/sed to make the table easier to read 4 morepleasant to the eye
http://cset.sp.utoledo.edu/cset3100/padspace.htmhttp://cset.sp.utoledo.edu/cset3100/padspace.htm


15/25

Table idt% & Heig%tTable idt% & Heig%t

/se the/se the width=valuewidth=valueattribute within the table tag to specifyattribute within the table tag to specifythe overall width of the table'the overall width of the table' !alue!alue is specified either as ais specified either as apercentage of the containing element or in pi$elspercentage of the containing element or in pi$els

!f specified in pi$els" the table maintains same sie regardless!f specified in pi$els" the table maintains same sie regardless

of monitor sie and resolution' !f specified as a percentage" theof monitor sie and resolution' !f specified as a percentage" thetable will fluctuate as the monitor sie and resolution changestable will fluctuate as the monitor sie and resolution changes

/se C889 to fill entire monitor width/se C889 to fill entire monitor width The browser will ignore directives to use less space than itThe browser will ignore directives to use less space than it

re1uires'


16/25

Cell idt% & Heig%tCell idt% & Heig%t

/se the/se the width=valuewidth=valueattribute to specify theattribute to specify thewidth of an individual cell of the table'width of an individual cell of the table' !alue!alue isisspecified either as a percentage of the table orspecified either as a percentage of the table or

in pi$elsin pi$els Set the width of the first cell in a column andSet the width of the first cell in a column and

all other cells in that column will inherit thatall other cells in that column will inherit thatwidth' Bote + if one of the other cells in thewidth' Bote + if one of the other cells in the

column re1uires more space" the browser willcolumn re1uires more space" the browser willset the column to the larger widthset the column to the larger width Many browsers support theMany browsers support the height=valueheight=value

attribute where value is specified as above'attribute where value is specified as above'However" it has been deprecated and" asHowever" it has been deprecated and" as

such" ! do not recommend its usesuch" ! do not recommend its use


17/25

T%eT%e nowrapnowrapAttributeAttribute

/se the/se the nowrap=nowrapnowrap=nowrapattribute toattribute to

prevent te$t from wrapping as table sieprevent te$t from wrapping as table sie

is changedis changed


18/25

Aligning Cell ContentAligning Cell Content

>y default" ->y default" -tdtd. cell te$t is placed in the. cell te$t is placed in the

middle of the cell" aligned with the leftmiddle of the cell" aligned with the left

edge of the cell' -edge of the cell' -thth. elements are. elements arecenteredcentered

(ou can change both the vertical and(ou can change both the vertical and

horiontal alignmenthoriontal alignment ,an use ,SS te$t6align style as well,an use ,SS te$t6align style as well


19/25

Hori'ontal AlignentHori'ontal Alignent

/se the/se the align=positionalign=positionattribute to specify horiontalattribute to specify horiontalalignmentalignment

))"osition"osition* can be* can be+ leftleft6 -td. default6 -td. default

+ centercenter 6 -th. default6 -th. default

+ rightright

+ #ustify#ustify

+ charchar6 align values based on position of a particular6 align values based on position of a particularcharacter + for e$ample" a period" to line up currencycharacter + for e$ample" a period" to line up currencyvalues' Default value is based on language specified for thevalues' Default value is based on language specified for thebrowser' ,an change by using thebrowser' ,an change by using the charcharattribute + i'e'"attribute + i'e'" %% would align on E' This is notwould align on E' This is notwell supported by most browserswell supported by most browsers


20/25

(ertical Alignent(ertical Alignent

/se the v/se the valign=positionalign=positionattribute to specifyattribute to specifyvertical alignmentvertical alignment

))positionposition* can be* can be+ toptop+middlemiddle 6 default6 default

+bottombottom

+baseline -baseline - TheThe baselinebaselineis an imaginary line uponis an imaginary line uponwhich rests all letters in a line of te$t'which rests all letters in a line of te$t' baselinebaselinesets the row so that all cells share the samesets the row so that all cells share the samebaseline' Most of the time this has the same effectbaseline' Most of the time this has the same effectasas bottombottom" but if the fonts are different sies" then" but if the fonts are different sies" then

baselinebaselinewill result in a better appearancewill result in a better appearance


21/25

#oratting Table Te"t#oratting Table Te"t

,an use the,an use the tag set" but it istag set" but it is

deprecated and so ! prefer that you notdeprecated and so ! prefer that you not

use ituse it !nstead" use ,SS #more on this later in!nstead" use ,SS #more on this later in

the course%'


22/25

Coon CSS #oratting SettingsCoon CSS #oratting Settings

-styleF-styleF

+font-family: font namefont-family: font name+ specifies font+ specifies font

+ ))font-si&efont-si&e55 fontfontsi&esi&e* + multiple options* + multiple options

+background-color: colorbackground-color: color* + works same as* + works same as

at table levelat table level

+background-image: url'url(background-image: url'url(+ to specify+ to specifyan image as a background imagean image as a background image


23/25

Table AlignentTable Alignent

/se the/se the float:position stylefloat:position styleto align a tableto align a table

with either the left or right margin of a pagewith either the left or right margin of a page

and then allow the te$t to flow around theand then allow the te$t to flow around thetable' :s you probably surmised"table' :s you probably surmised"positionpositioncancan

be eitherbe either leftleftoror rightright

!f you do this" typically a good idea to specify!f you do this" typically a good idea to specify

thethemarginsmarginsstyle to prevent te$t fromstyle to prevent te$t fromcrowding too closely'crowding too closely' )argins)arginsspecified asspecified as

))margin: top bottom left rightmargin: top bottom left rightwhere each ofwhere each of

the ? are specified in pi$elsthe ? are specified in pi$els


24/25

eb )age Designeb )age Design

Gne popular use of tables is to set up aGne popular use of tables is to set up a

webpage 4 website template so that thewebpage 4 website template so that the

entire page is a set of nested tablesentire page is a set of nested tables This provides ability to mimic frames 4This provides ability to mimic frames 4

gain very precise control overgain very precise control over

appearance without the hassles ofappearance without the hassles offramesframes


25/25

eb )age Designeb )age Design

Here0s a link to a simple e$ampleHere0s a link to a simple e$ample

: very simple layout: very simple layout
http://cset.sp.utoledo.edu/cset3100/cset3100_simpletable.htmlhttp://cset.sp.utoledo.edu/cset3100/cset3100_simpletable.htmlhttp://cset.sp.utoledo.edu/cset3100/cset3100_simpletable.html

Documents

HTML Tables Tutorial with Notepad