Opstilling af tabel

Tabel - overskrifter i top
Tabel med overskrifter i top og side

Overskrifter i top

HTML
	
<table>
	<thead>
		<tr>
			<th>th 1</th> <th>th 2</th> <th>th 3</th> <th>th 4</th>
		</tr>
	</thead>	
	
	<tbody>
		<tr>
			<td>Celle 1</td> <td>Celle 2</td> <td>Celle 3</td> <td>celle 4</td>
		</tr>
		<tr>
			<td>Celle 1</td> <td>Celle 2</td> <td>Celle 3</td> <td>celle 4</td>
		</tr>	
		<tr>
			<td>Celle 1</td> <td>Celle 2 - jhsad asdkjjasd aslkas aslklasl asas</td> <td>Celle 3</td> <td>Celle 4 - jksa - sak jkjk iwq</td>
		</tr>
	</tbody>
</table>
CSS med kommentarer
table {
	border-collapse: collapse; /* FJERNER DOBBELT-BORDER */

		white-space: -moz-pre-wrap; 
		white-space: -o-pre-wrap;
	white-space: pre-wrap; /* AUTO LINE-BREAK VED KOMMA PUNKTUM ETC */	
	word-wrap: break-word; /*IE - AUTO LINE-BREAK*/ 
	
	font-size: 16px;
	font-size: 1.6rem;
	color: #000c53;
	line-height: 2.0rem;
}


/* OVERSKRIFTER I TOP  */
tr > th {  
	padding: 8px 10px; /* SOM I td */
	background: #EEE;
	border-left: 3px solid #CCC;
	border-bottom: 3px solid #CCC; 
	
	/* font-weight: bold; */ /* ER BOLD PER DEFAULT */
	text-align: left; /* ER CENTRERET PER DEFAULT */
}	
tr > th:first-child {  
	border-left: 0; /* th 1 */
}


/* YDERSTE HØJRE KOLONNE */
tr > td:last-of-type {	
	border-right: 0; 
}	


/* CELLER */
tr > td {  
	min-width: 200px;  
	padding: 8px 10px; /* SOM I th */
	border-bottom: 3px solid #CCC;
	border-right: 3px solid #CCC;
	text-align: left; 	
	vertical-align: top; /* PLACER TEXT I TOP AF CELLE FREM FOR MIDT */
}
Tabel - overskrifter i top og venstre side
Tabel med overskrifter i top og side

Overskrifter i top og side

HTML
	
<table>
<thead>
	<tr>
		<th>th:first-child</th> <th>th 2</th> <th>th 3</th> <th>th 4</th>
	</tr>
</thead>	

<tbody>
	<tr>
		<td>td:first-of-type</td> <td>Celle 2</td> <td>Celle 3</td> <td>celle 4</td>
	</tr>
	<tr>
		<td>td:first-of-type</td> <td>Celle 2</td> <td>Celle 3</td> <td>celle 4</td>
	</tr>	
	<tr>
		<td>td:first-of-type</td> <td>Celle 2 HJH-GJHJ-HGJ HGJ-HGJHGJ</td> <td>Celle 3</td> <td>Celle 4 HGJHJHGJ-HGJHGJHGJ</td>
	</tr>
</tbody>
</table>
CSS med kommentarer
	
table {
	border-collapse: collapse; /* FJERNER DOBBELT-BORDER  */

		white-space: -moz-pre-wrap; 
		white-space: -o-pre-wrap;
	white-space: pre-wrap; /* AUTO LINE-BREAK VED KOMMA PUNKTUM ETC */	
	word-wrap: break-word; /*IE - AUTO LINE-BREAK*/ 
	
	font-size: 16px;
	font-size: 1.6rem;
	color: #000c53;
	line-height: 2.0rem;
}


/* OVERSKRIFTER I TOP  */
tr > th {  
	padding: 8px 10px;
	background: #EEE;
	border-left: 3px solid #CCC;
	border-bottom: 3px solid #CCC; 
	text-align: left; 
}
/* TOM CELLE ØVERST TIL VENSTRE */
tr > th:first-child {  
	background: transparent;
	border-left: 0; 
}


/* OVERSKRIFTER I VENSTRE SIDE */
tr > td:first-of-type {	
	background: #EEE;
	border-right: 3px solid #CCC; 

	white-space: nowrap; 
	font-weight: bold; 
}	
/* YDERSTE HØJRE KOLONNE */
tr > td:last-of-type {	
	border-right: 0; 
}	


/* CELLER */
tr > td {  
	min-width: 200px;  
	padding: 8px 10px; 
	border-bottom: 3px solid #CCC;
	border-right: 3px solid #CCC;
	text-align: left; 
	vertical-align: top; /* PLACER TEXT I TOP AF CELLE FREM FOR MIDT */	
}

Artiklens indhold

Eksempel på opstilling af en HTML-tabel til præsentation af data med valg mellem ovberskrifter i top eller overskrifter i både top og bund.

Se eksempler i "demo" herunder, og find beskrivelser af elementerne der bygger tabeller lænegre nede på siden - beskrivelser og eksempler tager udgangspunkt i en tabel med overskrifter i både top og side.

Tabel - overskrifter i top
DEMO
Tabel - overskrifter i top og side
DEMO

Tabel

table

Tabel

  1. 'table' bruges til at at præsentere data på en overskuelig måde
  2. 'table' består af 2 eller flere horizontale rækker opdelt i enkeltstående celler som hver især indeholder data
Styling table
  • tabellens ydre dimensioner - width, height
  • background
  • ydre ramme - border
  • tabellens font

Rækker

Table row - tr

Rækker med table row

  1. 'tr' er en forkortelse af ”table row”
  2. En række indsættes i HTML med elementet 'tr' – en forkortelse for ”table row”
  3. Indholdet af 'tr' bevæger sig horizontalt fra venstre mod højre
  4. 'tr' kan opbevare HTML-elementerne 'th' og 'td'
Styling table > tr
  • 'tr' fungerer kun som container for 'th' og 'td'
  • 'tr' bør ikke styles
Table header - th

En række med table header

  1. 'th' er en forkortelse af ”table header”
  2. 'th' er tabellens øverste horizontale række og indeholder overskrifter
  3. 'th' skal altid optræde som 'child' af 'tr'
  4. 'th' bør opbevares i 'thead'
Styling table > tr > th
  • Per default er text i 'th' er centreret og bold
  • 'th' bør styles som en overskrift til tabellens celler 'td'
  • Styling i 'td' overføres IKKE til 'th' - 'th' skal styles individuelt
HTML
<thead>
	<tr>
		<th> overskrift </th>
	</tr>	
</thead>

Kolonner

Column - colgroup og col

Kolonner med colgroup og col

  1. HTML-elementerne 'colgroup' og 'col' er udviklet med henblik på styling af vertikale kolonner i en 'table'
  2. Ofte skal yderste venstre kolonne fungere som overskrifter på samme måde som 'th' og derfor styles på samme måde
  3. 'colgroup' fungerer som wrapper for 'col' - 'col' svarer til 'td' og 'colgroup' til 'tr'
  4. Både for 'colgroup' eller 'col' gælder det, at der er meget negrænsede muligheder for styæing - elementerne er derfor ikke brugbare til overskrifter i venstre side
Styling table > col
  • Text kan ikke styles
CSS-properties der kan benyttes
col {  
	visibility: #;
	width: #;
	background: #; 	
	border: #;
}
col indsat i HTML
<table>
	<colgroup>  <!-- COLGROUP WTAPPER FLERE COL'S -->
		<col />  <!-- ELEMENTET COL INDSAT I TABLE -->
		<col /> 
	</colgroup>
 
	<tr>
		<th>th:first</th> <th>th</th> <th>th</th> <th>th:last</th>
	</tr>	
	<tr>
		<td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td>
	</tr>	
</table>
Selector - first-of-type
  1. Med CSS-selectoren 'first-of-type' kan hele yderste venstre kolonne styles som overskrifter på samme måde som 'th'
  2. 'first-of-type' rammer hver af de førstkommende venstrestillede 'td'
  3. der er stort set fuld crossbrowsersupport ned til IE8
  4. Stylingen sker udelukkende via CSS - det er ikke nødvendigt at indsætte et element som 'col' i HTML
CSS
tr > td:first-of-type {	/* FØRSTE VERTIKALE KOLONNE - MED first-of-type */
	font-weight: bold;
}

Celler

Table data - td

Celler

  1. 'td' er en forkortelse af ”table data”
  2. Med undtaglese af cellerne i 'th' er 'table' opbygget af 'td'
  3. 'td' bør opbevares i 'tbody'
Styling table > tr > td
  • Per default er text i 'td' venstrestillet
  • Styling i 'td' "trumfer" IKKE styling i 'th' - de 2 elementer skal styles individuelt
  • Styling i 'td' "trumfer" styling i 'tr' på vigtige properties:
td TRUMFER STYLING I ANDRE ELEMENTER 
table > tr > td {  
	background: #; 	
	border: #;
	font-...: #; /* ALLE FONT-RELATEREDE PROPERTIES */
}
td indsat i HTML
<tr>
	<td> Celle 1 </td> <td>Celle 2</td> <td>celle 3</td>
</tr>

Tabel med kommentarer - overskrifter i top og side

HTML
	
<table>
<!--<colgroup>
	<col />
	<col />
</colgroup>-->
	<thead>
		<tr>
			<th>th:first-child</th> <th>th 2</th> <th>th 3</th> <th>th 4</th>
		</tr>
	</thead>	
	
	<tbody>
		<tr>
			<td>td:first-of-type</td> <td>Celle 2</td> <td>Celle 3</td> <td>celle 4</td>
		</tr>
		<tr>
			<td>td:first-of-type</td> <td>Celle 2</td> <td>Celle 3</td> <td>celle 4</td>
		</tr>	
		<tr>
			<td>td:first-of-type</td> <td>Celle 2 HJH-GJHJ-HGJ HGJ-HGJHGJ</td> <td>Celle 3</td> <td>Celle 4 HGJHJHGJ-HGJHGJHGJ</td>
		</tr>
	</tbody>
</table>
CSS med kommentarer
	
/* 	TIL TABELLEN */
table {
	border-collapse: collapse; /* FJERNER DOBBELT-BORDER NÅR BORDER INDSÆTTES I TR ELLERE TD  */

		white-space: -moz-pre-wrap; 
		white-space: -o-pre-wrap;
	white-space: pre-wrap; /* AUTO LINE-BREAK VED KOMMA PUNKTUM OG ANDRE TEGN*/	
	word-wrap: break-word; /*IE - AUTO LINE-BREAK*/ 
	
	font-size: 16px;
	font-size: 1.6rem;
	color: #000c53;
	line-height: 2.0rem;
}

/* HORIZON RÆKKER  */
/* WRAPPER th OG td */	
tr {	
/* INGEN STYLIN PÅ tr */
}

/* HEADER th - TIL ØVERSTE HORIZONTALE OVERSKRIFTER  */
tr > th {  
	padding: 8px 10px; /* SOM I td */
	background: #EEE;
	border-left: 3px solid #CCC;
	border-bottom: 3px solid #CCC; /* BORDER MOD tbody / CENTRUM */ 
	
	/* font-weight: bold; */ /* ER BOLD PER DEFAULT */
	text-align: left; /* ER CENTRERET PER DEFAULT */
}

/* TOMT FELTET ØVERST TIL VENSTRE */
tr > th:first-child {  
	background: transparent;
	border-left: 0; /* FJERNE border */
}


/* TIL YDERSTE VENSTRE VERTIKALE OVERSKRIFTER - MED first-of-type */
tr > td:first-of-type {	
	background: #EEE;
	border-right: 3px solid #CCC; /* BORDER MOD tbody / CENTRUM */ 

	white-space: nowrap; /* BEHOLD OVERSKRIFTER PÅ SAMME TEXT-LIMIE */
	font-weight: bold; /* SOM th's DEFAULT STYLING */
}	

/* TIL YDERSTE HØJRE VERTIKALE OVERSKRIFT */
tr > td:last-of-type {	
	border-right: 0; /* FJERN YDERSTE HØJRE BORDER */
}	


/* 1. VERTIKALE KOLONNE - MED col - BRUG IKKE col ! */
colgroup {  
	font-size: 16px;
	font-size: 1.6rem;
	color: red;
}
col {	
	/*color: white;*/  /* KAN IKKE STYLES I col */
	/*font-weight: bold;*/ /* KAN IKKE STYLES I col */
}


/* TABLE CELL - HVER ENKELT CELLE */
tr > td {  
	min-width: 200px;  /* MINIMUM BREDDE PÅ CELLER - th UDVIDER SIG AFHÆNGIG AF INDHOLD I td  */
	padding: 8px 10px; /* SOM I th */
	border-bottom: 3px solid #CCC;
	border-right: 3px solid #CCC;
	text-align: left; /* SOM I th */	
	vertical-align: top; /* PLACER TEXT I TOP AF CELLE FREM FOR MIDT */
}