2022.2

thefly(inPreviewmodeandinoutput)willlookexactlythesameasthefirstone.Alternatingrowcol-
ors,forexample,indynamicallyaddedrowscanonlybedoneviaCSS.Howtodothisisdescribed
below.
AnothergoodreasontopreferstylesheetsoverlocalformattingforDynamicTables,isthattheoutput
fromaDynamicTableiscreatedslightlyfasterwhenit'sstyledviaCascadingStyleSheetsthanwhen
it'sstyledwithlocalformatting.
Howtousestylesheetsisexplainedinanothertopic;see"StylingtemplateswithCSSfiles"on
page672.
Notethattomakeastyleruleapplytoaspecifictable,roworcell,youhavetoaddanIDorclassto
thattable,roworcell.
Astylesheetcontainsabunchofstylerulesfordifferentelements,thatareidentifiedviaaCSS
selector.Thiscanbetheelement'sHTMLtag(withoutanglebrackets),anattribute,itsID,oraclass.
WhenusedasaCSSselector,theHTMLtagforatableistable.Forarow,itistrandforacell,td.A
stylerulethatusesoneofthese,however,wouldapplytoalltables,rows,orcells.Foraruletobe
morespecificyouneedtoaddanID(forauniqueelement)oraclass(forasetofsimilarelements)to
thetable,roworcell,andusethatasthestylerule'sselector.
Adding an ID or class to a table, row or cell
BeforeyoucanaddanIDorclasstoatable,roworcell,youhavetoselectthattable,roworcell(see
"Selectingatable,roworcell"onpage689).Afterselectingthecell,rowortable,typetheIDorclassin
therespectivefieldontheAttributespane.
InCSS,refertothetable,roworcellwith#ID(whereIDshouldbereplacedwiththeactualID)orwith
.class(whereclassshouldbereplacedwiththeactualclass).
Styling the first, last and nth rows
TheCSSpseudo-classes:first-child,:last-childand:nth-child()areveryusefulforstyl-
ingtablerows,especiallyinDynamicTables.
ACSSpseudo-classfollowsaselectortospecifyaspecialstateofthatselector.Italwaysstartswitha
colon.
Thepseudo-classes:first-child,:last-childand:nth-child()selectanelementonlyifit
isthefirst,lastornthchildelementrespectively.(InHTMLandCSS,thewordchildreferstoanele-
mentinsideanotherelement.)
ThefollowingCSSstyleruleselectsthetablerow(tr)thatcomesfirst(:first-child)initsparent(which
naturallyisatable),andcolorsitsbackgroundred:
Page 691