Listor och tabeller

Listor

Det finns tre sorters listor, numrerade, onumrerade och definitionslistor. De två första skiljer sig inte nämnvärt åt. Enda skillnaden är vilket märke man använder för att skapa själva listan. Man skapar en numrerad lista (ordered list) med märket <OL> och en onumrerad lista (unordered list) med märket <UL>. För att lägga till ett "objekt" i listan använder man sig av märket <LI>. Listan avslutas med </UL> respektive </OL>.

När det gäller den onumrerade listan så kan man ställa in vilken sorts symbol man vill ha framför varje "objekt". Det gör man med <UL TYPE= > som kan vara antingen DISC, SQUARE eller CIRCLE.

Den numrerade listan har inga symboler utan siffror som kan ställas in med <OL TYPE= >. TYPE kan vara 1 för arabiska siffror, a för alfanumeriska gemener, A för alfanumeriska versaler, i för romerska genmener eller I för romerska versaler. Man kan också ställa in <OL START=> för det nummer som listan ska börja med.

Det går också att ställa in STYLE specifikt för varje objekt i listan genom <LI STYLE=>. Här följer ett exempel på en websida med numrerade och onumrerade listor:


<HTML>
	<HEAD><TITLE>Listor</TITLE></HEAD>
	
	<BODY>
		Favoritfrukter
		<OL TYPE="1" START="1">
			<LI>Bananer
			<LI>Apelsiner
			<LI>Kiwi
		</OL>

		Datalagringsmedia
		<UL>
			<LI TYPE="DISC">Disketter
			<LI TYPE="CIRCLE">CD-ROM
			<LI TYPE="SQUARE">Hårddisk
		</UL>
	</BODY>
</HTML>

Resultatet:

Favoritfrukter

  1. Bananer
  2. Apelsiner
  3. Kiwi
Datalagringsmedia
  • Disketter
  • CD-ROM
  • Hårddisk

Definitionslistan

När det gäller definitionslistan så är den enklare att skapa. Man använder märkena <DL> och </DL> för att skapa en definitionslista. Objekten läggs till med <DT> och objektens definitioner läggs till med <DD>. Exempel:

<DL>
	<DT>HTML
	<DD>Hyper Text Markup Language
	<DT>DTD
	<DD>Document Type Definition
	<DT>SGML
	<DD>Standard Generalized Markup Language
	<DT>WWW
	<DD>World Wide Web
</DL>

Resultatet:

HTML
Hyper Text Markup Language
DTD
Document Type Definition
SGML
Standard Generalized Markup Language
WWW
World Wide Web

Tabeller

Det kan ibland vara bra att presentera fakta i tabellform och då kan det också vara bra att känna till hur man skapar tabeller i HTML-kod. Det gör man märket <TABLE> som alltså påbörjar en tabell. Precis som när det gäller de flesta andra märken så finns det en rad valfria inställningar.

ALIGN kan vara LEFT, CENTER eller RIGHT och bestämmer tabellens horisontella placering. Observera att om man använder märket <CENTER> eller <DIV ALIGN> så är det istället de inställningarna som gäller.

WIDTH ställer in bredden på tabellen. Om man inte anger WIDTH ändras bredden automatiskt till ett passande värde. WIDTH kan antingen vara absoluta bildpunkter eller procent av den totala bredden.

BORDER ställer in bredden på tabellens kantram. Om man inte anger BORDER eller ställer BORDER="0" så ska ingen kantram användas. Kantramens tjocklek anges i absoluta bildpunkter.

Med CELLSPACING kan man ange avståndet i absoluta bildpunkter mellan cellerna och med CELLPADDING sätter man avståndet mellan cellen och kanten.

Märket <TR>

Med märket <TR> påbörjar man en rad. Man kan också avsluta raden med </TR> men det är (enligt standarden) inte nödvändigt. Det finns två inställningar för märket <TR>, ALIGN och VALIGN. ALIGN kan vara antingen LEFT, CENTER eller RIGHT och bestämmer textens placering i varje cell. VALIGN kan däremot vara TOP, MIDDLE eller BOTTOM och bestämmer textens vertikala placering i cellen.

Märket <TH> och märket <TD>

Märket <TH> har precis samma syntax (används på samma sätt) som märket <TD>. Det som skiljer dem åt är att <TH> är tänkt för rubriker i tabellen medan <TD> är tänkt för vanlig data.

Man kan ange följande inställningar för märkena <TH> och <TD>:NOWRAP vilket innebär att automatiska ordbrytning inte är tillåten.

ROWSPAN= med vilken man kan ange hur många rader cellen tar upp. Normalt tar en cell upp endast en rad.

COLSPAN= med vilken man kan ange hur många kolumner cellen tar upp. Normalt tar en cell upp endast en kolumn.

ALIGN och VALIGN (se förklaring av märket <TR> ovan).

Med WIDTH och HEIGHT kan man föreslå cellens höjd respektive bredd i absoluta bildpunkter. Men enligt standarden så behöver inte webläsaren rätta sig efter det utan kan göra precis som den vill; dock kan man (även om det kanske är lite naivt) hoppas att de flesta webläsare faktiskt rättar sig efter de värden man anger.

Exempel på en tabell:


<TABLE BORDER="5">
	<TR>
		<TH ALIGN="CENTER" COLSPAN="4">
			Nobelpristagare
		</TH>
	</TR>

	<TR ALIGN="CENTER">
		<TD>
			År
		</TD>
		<TD>
			Litteratur
		</TD>
		<TD>
			Fysik
		</TD>
		<TD>
			Kemi
		</TD>		
	</TR>
	
	<TR ALIGN="CENTER">
		<TD> 1901 </TD>
		<TD> R F A Sully Proudhomme </TD>
		<TD> W C Röntgen </TD>
		<TD> J H van't Hoff </TD>
	</TR>
	
	<TR ALIGN="CENTER">
		<TD> 1902 </TD>
		<TD> Th Mommsen </TD>
		<TD> H A Lorentz / P Zeeman </TD>
		<TD> E Fischer </TD>
	</TR>
	
	<TR ALIGN="CENTER">
		<TD> 1903 </TD>
		<TD> B Björnsson </TD>
		<TD> A H Becquerel / P och M Curie </TD>
		<TD> S A Arrhenius </TD>
	</TR>

	<TR ALIGN="CENTER">
		<TD> 1904 </TD>
		<TD> F Mistral / J Echegaray </TD>
		<TD> Lord Rayleigh </TD>
		<TD> W Ramsay </TD>
	</TR>

	<TR ALIGN="CENTER">
		<TD> 1905 </TD>
		<TD> H Sienkiewicz </TD>
		<TD> J J Thomson </TD>
		<TD> H Moissan </TD>
	</TR>
</TABLE>

Tabellen ser ut så här:

Nobelpristagare
År Litteratur Fysik Kemi
1901 R F A Sully Proudhomme W C Röntgen J H van't Hoff
1902 Th Mommsen H A Lorentz / P Zeeman E Fischer
1903 B Björnsson A H Becquerel / P och M Curie S A Arrhenius
1904 F Mistral / J Echegaray Lord Rayleigh W Ramsay
1905 H Sienkiewicz J J Thomson H Moissan