<table> (table)

Rader (Rekker)

Kolonner

Rader / Kolonner

Sammenslåing av celler - Rader (Rekker)

7 x 7 med kun TR

Laget en BOX MODEL med tables av 7x7

1. 1a og 1e = colspan="3"
2. 2b og 2e = colspan="2"
3. 5e = colspan="3"
4. 6b = colspan="5"
5. 7a = colspan="7"

Sammenslåing av celler - Kolonner

Egenskaper oversatt

CAPTION

- Caption / Tabelltittel

COL

- Column / Kolonne

COLGROUP

- Column Group / ?

TBODY

- Table Body / ?

TD

- Table Data / (Celle i tabell)

TFOOT

- Table Footer / ?

TH

- Table Head / Overskriftscelle

THEAD

- Table Header / Tabelltopptekst

TR

- Table Row / (Rad i tabell)/dd>

https://hiof.instructure.com/courses/712/pages/html-tabeller-og-punktlister

En tabell kan være fornuftig å bruke for å gi en bedre oversikt på en nettside. For å lage en tabell bruker vi <table>. Hver ny rad starter med <tr>, mens cellene i raden markeres med <td>. I den øverste raden kan man bruke <th> i stedet for <td> for å markere at dette er overskrifter. Legg merke til at de automatisk blir satt i fet skrift og midtstilt i cellen i tabellen.

PB: Denne har også en del nyttig norsk/engelsk samlet: http://www.hildesverden.no/html_koder.html

w3schools: HTML Tables

PB: Modifisert

Define an HTML Table

The <table> tag defines an HTML table.

• Each table row is defined with a <tr> tag.
• Each table header is defined with a <th> tag.
• Each table data/cell is defined with a<td> tag.

By default, the text in <th> elements are bold and centered.

By default, the text in <td> elements are regular and left-aligned.

Note: The <td> elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other tables, etc.

HTML Table - Add a Border

table, th, td {
  border: 1px solid black;
}

Note: Notice that the table in the examples above have double borders. This is because both the table and the <th> and <td> elements have separate borders.

To remove double borders, take a look at the example below.

HTML Table - Collapsed Borders

To let the borders collapse into one border, add the CSS border-collapse property:

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

HTML Table - Add Cell Padding

th, td {
  padding: 15px;
}

HTML Table - Left-align Headings

By default, table headings are bold and centered.

To left-align the table headings, use the CSS text-align property:

th {
  text-align: left;
}

HTML Table - Add Border Spacing

Border spacing specifies the space between the cells.

To set the border spacing for a table, use the CSS border-spacing property:

table {
  border-spacing: 5px;
}

Note: If the table has collapsed borders, border-spacing has no effect.

HTML Table - Cell that Spans Many Columns

To make a cell span more than one column, use the colspan attribute.

HTML Table - Cell that Spans Many Rows

To make a cell span more than one row, use the rowspan attribute.

HTML Table - Add a Caption

To add a caption to a table, use the <caption> tag.

Note: The <caption> tag must be inserted immediately after the <table> tag.

A Special Style for One Table

To define a special style for one particular table, add an id attribute to the table:

<table id="t01">...

Now you can define a special style for this table:

#t01 {
  width: 100%;
  background-color: #f1f1c1;
}

And add more styles:

table {
  width:100%;
}
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 15px;
  text-align: left;
}
#t01 tr:nth-child(even) {
  background-color: #eee;
}
#t01 tr:nth-child(odd) {
 background-color: #fff;
}
#t01 th {
  background-color: black;
  color: white;
}

CSS Table Size

Table Width and Height

The width and height of a table are defined by the width and height properties.

The example below sets the width of the table to 100%, and the height of the <th> elements to 70px:

table {
  width: 100%;
}

th {
  height: 70px;
}

To create a table that should only span half the page, use width: 50%:

table {
  width: 50%;
}

th {
  height: 70px;
}

CSS Table Alignment

Horizontal Alignment

The text-align property sets the horizontal alignment (like left, right, or center) of the content in <th> or <td>.

By default, the content of <th> elements are center-aligned and the content of <td> elements are left-aligned.

To center-align the content of  <td> elements as well, use text-align: center:

td {
  text-align: center;
}

To left-align the content, force the alignment of <th> elements to be left-aligned, with the text-align: left property:

th {
  text-align: left;
}

Vertical Alignment

The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the content in <th> or <td>.

By default, the vertical alignment of the content in a table is middle (for both <th> and <td> elements).

The following example sets the vertical text alignment to bottom for <td> elements:

td {
  height: 50px;
  vertical-align: bottom;
}

CSS Table Style

Table Padding

To control the space between the border and the content in a table, use the padding property on <td> and <th> elements:

th, td {
  padding: 15px;
  text-align: left;
}

Horizontal Dividers

Add the border-bottom property to <th> and <td> for horizontal dividers:

th, td {
  border-bottom: 1px solid #ddd;
}

Horizontal Dividers

Use the :hover selector on <tr> to highlight table rows on mouse over:

tr:hover {background-color: #f5f5f5;}

Striped Tables

For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows:

tr:nth-child(even) {background-color: #f2f2f2;}

Table Color

The example below specifies the background color and text color of <th> elements:

th {
  background-color: #4CAF50;
  color: white;
}

CSS Responsive Table

Responsive Table

A responsive table will display a horizontal scroll bar if the screen is too small to display the full content.

Add a container element (like <div>) with overflow-x:auto around the <table> element to make it responsive:

<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div> 

Note: In OS X Lion (on Mac), scrollbars are hidden by default and only shown when being used (even though "overflow:scroll" is set).

Make a fancy table

<!DOCTYPE html>
<html>
<head>
<style>
#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}
</style>
</head>
<body>

<table id="customers">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbköp</td>
    <td>Christina Berglund</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Königlich Essen</td>
    <td>Philip Cramer</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>Simon Crowther</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Paris spécialités</td>
    <td>Marie Bertrand</td>
    <td>France</td>
  </tr>
</table>

</body>
</html>

PB: Har lagt inn   på alle mellomrom, slik at effekten skal kunne komme frem.

CSS - Tables

Fra tutorialspoint.com

• The border-collapse specifies whether the browser should control the appearance of the adjacent borders that touch each other or whether each cell should maintain its style.

• The border-spacing specifies the width that should appear between table cells.

• The caption-side captions are presented in the <caption> element. By default, these are rendered above the table in the document. You use the caption-side property to control the placement of the table caption.

• The empty-cells specifies whether the border should be shown if a cell is empty.

• The table-layout allows browsers to speed up layout of a table by using the first width properties it comes across for the rest of a column rather than having to load the whole table before rendering it.

NOTE − This property (table-layout) is not supported by many browsers so do not rely on this property.

The border-collapse Property

This property can have two values collapse and separate. The following example uses both the values −

table.one {border-collapse:collapse;}
table.two {border-collapse:separate;}

td.a {
  border-style:dotted; 
  border-width:3px; 
  border-color:#000000; 
  padding: 10px;
}

td.b {
  border-style:solid; 
  border-width:3px; 
  border-color:#333333; 
  padding:10px;
}

PB: Info: border-collapse:separate; er det samme som default, altså verdien på padding.

The border-spacing Property

The border-spacing property specifies the distance that separates adjacent cells'. It can take either one or two values; these should be units of length.

If you provide one value, it will applies to both vertical and horizontal borders. Or you can specify two values, in which case, the first refers to the horizontal spacing and the second to the vertical spacing −

NOTE − Unfortunately, this property does not work in Netscape 7 or IE 6.

/* If you provide one value */
table.example {border-spacing:10px;}

/* This is how you can provide two values */
table.example {border-spacing:10px; 15px;}

Now let's modify the previous example and see the effect −

table.one {
  border-collapse:separate;
  width:400px;
  border-spacing:10px;
}

table.two {
  border-collapse:separate;
  width:400px;
  border-spacing:10px 50px;
}

<table class="one" border="1">
  <caption>Separate Border Example with border-spacing</caption>
  <tr><td> Cell A Collapse Example</td></tr>
  <tr><td> Cell B Collapse Example</td></tr>
</table>

<br />

<table class="two" border="1">
  <caption>Separate Border Example with border-spacing</caption>
  <tr><td> Cell A Separate Example</td></tr>
  <tr><td> Cell B Separate Example</td></tr>
</table>

The caption-side Property

The caption-side property allows you to specify where the content of a <caption> element should be placed in relationship to the table. The table that follows lists the possible values.

This property can have one of the four values top, bottom, left or right. The following example uses each value.

NOTE − These properties may not work with your IE Browser.

Caption Top

caption.top {caption-side:top}

<table style="width:400px; border:1px solid black;">
  <caption class="top">
  This caption will appear at the top
  </caption>
  <tr><td>Cell A</td></tr>
  <tr><td>Cell B</td></tr>
</table>

Caption Right

caption.right {caption-side:right}

<table style="width:400px; border:1px solid black;">
  <caption class="right">
  This caption will appear at the right
  </caption>
  <tr><td>Cell A</td></tr>
  <tr><td>Cell B</td></tr>
</table>

PB: Fungerer ikke, 2021-02-24, på Edge.

Caption Bottom

caption.bottom {caption-side:bottom}

<table style="width:400px; border:1px solid black;">
  <caption class="bottom">
  This caption will appear at the bottom
  </caption>
  <tr><td>Cell A</td></tr>
  <tr><td>Cell B</td></tr>
</table>

Caption Left

caption.left {caption-side:left}

<table style="width:400px; border:1px solid black;">
  <caption class="left">
  This caption will appear at the left
  </caption>
  <tr><td>Cell A</td></tr>
  <tr><td>Cell B</td></tr>
</table>

PB: Fungerer ikke, 2021-02-24, på Edge.

The empty-cells Property

The empty-cells property indicates whether a cell without any content should have a border displayed.

This property can have one of the three values - show, hide or inherit.

Here is the empty-cells property used to hide borders of empty cells in the <table> element.

table.empty {
  width:350px;
  border-collapse:separate;
  empty-cells:hide;
}

td.empty {
  padding:5px;
  border-style:solid;
  border-width:1px;
  border-color:#999999;
}

<table class="empty">
  <tr>
    <th></th>
    <th>Title one</th>
    <th>Title two</th>
  </tr>
  <tr>
    <th>Row Title</th>
    <td class="empty">value</td>
    <td class="empty">value</td>
  </tr>
  <tr>
    <th>Row Title</th>
    <td class="empty">value</td>
    <td class="empty"></td>
  </tr>
</table>

border-collapse

Fra developer.mozilla.org

The border-collapse CSS property sets whether cells inside a <table> have shared or separate borders.

table {
 width:15rem;
 table-layout:fixed;
}
td {
 border:5px solid;
 border-color:#dc143c #1e90ff orange #32cd32;
 padding:.75rem
}

border-collapse: separate;

border-collapse: collapse;

CSS border-collapse Property

https://www.w3schools.com/cssref/pr_border-collapse.asp

table, td, th {
  border: 1px solid black;
}

border-collapse: separate

#table1 {
  border-collapse: separate;
  border-spacing: 10px;
}

<table id="table1">

When using "border-collapse: separate", the border-spacing property can be used to set the space between the cells:

border-collapse: collapse

#table2 {
  border-collapse: collapse;
  border-spacing: 10px;  
}

<table id="table2">

When using "border-collapse: collapse", the border-spacing property has no effect:

table, td, th {
  border: 3px solid red;
}

border-collapse: collapse:

#table1 {
  border-collapse: collapse;
  border-color: blue;
}

<table id="table1">

border-collapse: separate:

#table2 {
  border-collapse: separate;
  border-color: blue;
}

<table id="table2">

Caption

fra: http://html5doctor.com/

The caption element represents the title of the table that is its parent, if it has a parent and that is a table element.

When a table element is the only content in a figure element other than the figcaption, the caption element should be omitted in favor of the figcaption.

Position of the table caption

tagindex.net

div { margin-bottom: 20px; }
table, td, th { border: 2px #2b2b2b solid; }
table { width: 250px; }

#example1 caption { caption-side: top; }

#example2 caption { caption-side: bottom; }

<div id="example1">
<table>
<caption>top</caption>
<tr>
<th>Heading A</th>
<th>Heading B</th>
</tr>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>
</div>

<div id="example2">
<table>
<caption>bottom</caption>
<tr>
<th>Heading A</th>
<th>Heading B</th>
</tr>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>
</div>

(fra) A Complete Guide to the Table Element

https://css-tricks.com/complete-guide-table-element/

Bruker samme HTML

<table class="zebra">
<col>
<col>
<col>
<col>
<thead>
<tr>
  <th>Last Name</th>
  <th>First Name</th>
  <th>Email</th>
  <th>Due</th>
  <th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
  <td>Smith</td>
  <td>John</td>
  <td>jsmith@gmail.com</td>
  <td>$50.00</td>
  <td>http://www.jsmith.com</td>
</tr>
<tr>
  <td>Bach</td>
  <td>Frank</td>
  <td>fbach@yahoo.com</td>
  <td>$50.00</td>
  <td>http://www.frank.com</td>
</tr>
<tr>
  <td>Doe</td>
  <td>Jason</td>
  <td>jdoe@hotmail.com</td>
  <td>$100.00</td>
  <td>http://www.jdoe.com</td>
</tr>
<tr>
  <td>Conway</td>
  <td>Tim</td>
  <td>tconway@earthlink.net</td>
  <td>$50.00</td>
  <td>http://www.timconway.com</td>
</tr>
</tbody>
</table>

body {
  font: normal medium/1.4 sans-serif;
}
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  padding: 0.25rem;
  text-align: left;
  border: 1px solid #ccc;
}
tbody tr:nth-child(odd) {
  background: #eee;
}

body {
  font: normal medium/1.4 sans-serif;
}
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  padding: 0.25rem;
  text-align: left;
  border: 1px solid #ccc;
}
col:nth-child(3) {
  background: yellow; 
}

body {
  font: normal medium/1.4 sans-serif;
}
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  padding: 0.25rem;
  text-align: left;
  border: 1px solid #ccc;
}
tbody tr:hover {
  background: yellow;
}

PB: Denne er lik den første, uten zebra-effekt, men med HOVER-effekt lagt til.

Fra stackoverflow.com (forum)

Here's what I'm using to right-align the first column of each table.

table td:nth-child(2n-1) {
  align: right;
  text-align: right;
}

PB: Dette kan jo egentlig utføres med :first-child (fargelagt).

table td:first-child {
  background: #85edff;
}

<table class="tabeller">
 <tr>
  <th>Temaoverskrift 1</th>
  <th>Temaoverskrift 2</th>
 </tr>
 <tr>
  <td>1</td>
  <td>Info om 1</td>
 </tr>
 <tr>
  <td>2</td>
  <td>Info om 2</td>
 </tr>
</table>

w3schools: CSS Table Size

https://www.w3schools.com/css/css_table_size.asp

table {
  width: 50%;
}

th {
  height: 70px;
}

PB: Lagt til egen table.

Width and Height of a Table

FRA: tagindex.net

The default is "auto".

Example1

The width and height of the table can be specified by applying these properties to the TABLE element.

table {
border: 2px #2b2b2b solid;
width: 250px;
height: 150px;
}

td, th {
border: 2px #2b2b2b solid;
}

<table>
<tr>
<th>Heading A</th>
<th>Heading B</th>
</tr>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>

Example2

table, th, td {
border: 2px #2b2b2b solid;
}

td {
height: 100px;
}

#example1 { width: 100px; }
#example2 { width: 200px; }

<table>
<tr>
<th id="example1">Heading A</th>
<th id="example2">Heading B</th>
</tr>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>

Alignment in the cells

FRA: tagindex.net

The justify value adjust the spaces between the words to justify both left and right side. (However, the last line is not justified.)

The horizontal alignment

table {
border: 2px #2b2b2b solid;
width: 100%;
height: 150px;
}
td {
border: 2px #2b2b2b solid;
width: 25%;
}

#example1 { text-align: left; }
#example2 { text-align: center; }
#example3 { text-align: right; }

<table>
<tr>
<td>The default</td>
<td id="example1">The left</td>
<td id="example2">The center</td>
<td id="example3">The right</td>
</tr>
</table>

The vertical alignment

table {
border: 2px #2b2b2b solid;
width: 100%;
height: 150px;
}
td {
border: 2px #2b2b2b solid;
width: 25%;
}

#example4 { vertical-align: top; }
#example5 { vertical-align: middle; }
#example6 { vertical-align: bottom; }

<table>
<tr>
<td>The default</td>
<td id="example4">The top</td>
<td id="example5">The middle</td>
<td id="example6">The bottom</td>
</tr>
</table>

Justifies the text

table {
border: 2px #2b2b2b solid;
width: 100%;
}
td {
border: 2px #2b2b2b solid;
width: 50%;
}

#example7 { text-align: justify; }

<table>
<tr>
<td>This is example text ...</td>
<td id="example7">This is example text ...</td>
</tr>
</table>

Aligned to the baseline (Comparison with the "top" value)

table {
border: 2px #2b2b2b solid;
height: 100px;
}
td {
border: 2px #2b2b2b solid;
}

#example8 td { vertical-align: baseline; }
#example9 td { vertical-align: top; }

<table id="example8">
<tr>
<td>abcdefg</td>
<td>hijklmn</td>
<td style="font-size: 250%;">opqrstu</td>
<td>vwxyz</td>
</tr>
</table>

<table id="example9">
<tr>
<td>abcdefg</td>
<td>hijklmn</td>
<td style="font-size: 250%;">opqrstu</td>
<td>vwxyz</td>
</tr>
</table>

Padding inside the cells

FRA: tagindex.net

• padding: 2px : [all sides] paddings
• padding: 2px 4px : [top, bottom] [left, right] paddings
• padding: 2px 4px 6px : [top] [left, right] [bottom] paddings
• padding: 2px 4px 6px 8px : [top] [right] [bottom] [left] paddings

table, th, td { border: 2px #2b2b2b solid; }
th, td { padding: 10px 20px; }

<table>
<tr>
<th>Heading A</th>
<th>Heading B</th>
</tr>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>

UTDRAG FRA W3 CSS

table.w3-table-all {
    margin: 20px 0;
}
.w3-table-all {
    border: 1px solid #ccc;
}
.w3-table, .w3-table-all {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    display: table;
}

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

***********************

***********************

HTML Tables

By default, the text in <th> elements are bold and centered.

By default, the text in <td> elements are regular and left-aligned.

table, th, td {
  border: 1px solid black;
}

To left-align the table headings, use the CSS text-align property:

th {
  text-align: left;
}

HTML Table - Collapsed Borders

To let the borders collapse into one border, add the CSS border-collapse property:

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

HTML Table - Add Cell Padding

Cell padding specifies the space between the cell content and its borders.

th, td {
  padding: 15px;
}

The <caption> tag must be inserted immediately after the <table> tag.

<table style="width:100%">
  <caption>Kontaktliste</caption>
  <tr>
    <th>Firstname</th>...

To define a special style for one particular table, add an id attribute to the table:

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Now you can define a special style for this table:

#t01 tr:nth-child(even) {
  background-color: #eee;
}
#t01 tr:nth-child(odd) {
 background-color: #fff;
}
#t01 th {
  background-color: black;
  color: white;
}

***********************

tbody + tfoot

The tbody element represents a block of rows that consist of a body of data for the parent table element, if the tbody element has a parent and it is a table.

The tfoot element represents the block of rows that consist of the column summaries (footers) for the parent table element, if the tfoot element has a parent and it is a table.

***********************

Responsive Table -

A responsive table will display a horizontal scroll bar if the screen is too small to display the full content:

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {background-color: #f2f2f2;}

A responsive table will display a horizontal scroll bar if the screen is too small to display the full content. Resize the browser window to see the effect:

To create a responsive table, add a container element (like div) with overflow-x:auto around the table element:

#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}

Styling the table
Let's target the main <table> element first:

.styled-table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

Most of these are self explanatory but let's have a look at the main ones:

    box-shadow to add a subtle transparent shadow around the table
    border-collapse to ensure there is no space between the cell borders


Styling the header

For the header, we can simply change the background color and apply some basic styles to the text:

.styled-table thead tr {
    background-color: #009879;
    color: #ffffff;
    text-align: left;
}

Moving onto the table cells

Let's space things out a bit:

.styled-table th,
.styled-table td {
    padding: 12px 15px;
}

And the table rows...

For these, we want to do 3 things:

    Add a bottom border to each row for separation
    Add a lighter background to every second row to help readability
    Add a dark border to the very last row to signify the end of the table


.styled-table tbody tr {
    border-bottom: 1px solid #dddddd;
}

.styled-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.styled-table tbody tr:last-of-type {
    border-bottom: 2px solid #009879;
}

Lastly, let's make the active row look different

For this, we're just going to make changes to the text:

.styled-table tbody tr.active-row {
    font-weight: bold;
    color: #009879;
}

*
If you want your borders to look sharp on high resolution displays you can use thin instead of 1px :)

EX fra nettside


table {  /* table */
   border: 1px solid black;
   border-spacing: 5px;
   border-collapse: separate;
}
th, td {  /* cells */
   border: 1px solid #aaa;
   padding: 5px 10px;
}

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
   border: 2px dashed orange;
}
</style>
</head>
<body>
<h2>Team Ranking Table</h2>
<table>
<tr>
<th>Team</th>
<th>Rank</th>
<th>Points</th>
</tr>
<tr>
<td>India</td>
<td>1</td>
<td>200</td>
</tr>
<tr>
<td>England</td>
<td>2</td>
<td>180</td>
</tr>
<tr>
<td>Australia</td>
<td>3</td>
<td>150</td>
</tr>
<tr>
<td>NewZealand</td>
<td>4</td>
<td>130</td>
</tr>
<tr>
<td>SouthAfrica</td>
<td>5</td>
<td>100</td>
</tr>
<tr>
<td>WestIndies</td>
<td>6</td>
<td>80</td>
</tr>
<tr>
<td>Pakistan</td>
<td>7</td>
<td>70</td>
</tr>
</table>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
table {
   border-collapse: collapse;
   background-color: black;
   color: white;
}
th, td {
   border: 2px dashed yellow;
}
</style>
</head>
<body>
<h2>Team Ranking Table</h2>
<table>
<tr>
<th>Team</th>
<th>Rank</th>
<th>Points</th>
</tr>
<tr>
<td>India</td>
<td>1</td>
<td>200</td>
</tr>
<tr>
<td>England</td>
<td>2</td>
<td>180</td>
</tr>
<tr>
<td>Australia</td>
<td>3</td>
<td>150</td>
</tr>
<tr>
<td>NewZealand</td>
<td>4</td>
<td>130</td>
</tr>
<tr>
<td>SouthAfrica</td>
<td>5</td>
<td>100</td>
</tr>
<tr>
<td>WestIndies</td>
<td>6</td>
<td>80</td>
</tr>
<tr>
<td>Pakistan</td>
<td>7</td>
<td>70</td>
</tr>
</table>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
table {
   border: 1px solid black;
   background-color: blue;
   color: white;
}
th, td {
   border: 1px solid black;
   padding: 20px;
   text-align: center;
}
table#demo {
   table-layout: fixed;
   width: 100%;
}
</style>
</head>
<body>
<h2>Team Ranking Table</h2>
<table id="demo">
<tr>
<th>Team</th>
<th>Rank</th>
<th>Points</th>
</tr>
<tr>
<td>India</td>
<td>1</td>
<td>200</td>
</tr>
<tr>
<td>England</td>
<td>2</td>
<td>180</td>
</tr>
<tr>
<td>Australia</td>
<td>3</td>
<td>150</td>
</tr>
<tr>
<td>NewZealand</td>
<td>4</td>
<td>130</td>
</tr>
<tr>
<td>SouthAfrica</td>
<td>5</td>
<td>100</td>
</tr>
</table>
</body>
</html>

Essential CSS Properties for Styling Tables

We can define styles for tables using CSS. The following properties are often used to style <table> and its elements -

    border

    The CSS border property is used to define border-width, border-style and border-color.
    border-collapse

    This property is used to specify whether a <table> elements should have a shared or separate border.
    caption

    The caption-side property is used to vertically position the table caption box.
    empty-cells

    This property is used to specify the display of empty cells of a table.
    table-layout

    To define the algorithm to be used by the browser for laying out rows, columns and cells of a table.

<!DOCTYPE html>
<html>
<head>
<style>
table, table * {
   border: thin solid;
   padding: 5px;
   font-style: italic;
}
caption {
   caption-side: bottom;
}
td {
   box-shadow: inset 0 0 6px green;
}
</style>
</head>
<body>
<table>
<caption>Demo caption</caption>
<tr>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td></td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
<td></td>
</tr>
</table>
</body>
</html>


<!DOCTYPE html>
<html>
<head>
<style>
div {
   display: flex;
   float: left;
}
table {
   border: 3px solid black;
}
td {
   border: 3px solid lightgreen;
}
th {
   border: 3px solid lightblue;
}
#t2 {
   border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Team Rankings</h2>
<div>
<table id="t1">
<tr>
<th>Team (Test)</th>
<th>Rank </th>
</tr>
<tr>
<td>India </td>
<td>1 </td>
</tr>
<tr>
<td>Australia</td>
<td>2</td>
</tr>
</table>    
</div>
<div>
<table id="t2">
<tr>
<th>Team (ODI) </th>
<th>Rank </th>
</tr>
<tr>
<td>India </td>
<td>1 </td>
</tr>
<tr>
<td>England</td>
<td>2</td>
</tr>
</table>
</div>
</body>
</html>

***********************

***********************

Har bare plukket ut 1, på egen test-side. Det finnes mye spennende av layout, både med TABLE og kun CSS, på: https://codepen.io/collection/nhowz/?cursor=ZD0xJm89MSZwPTEmdj03. Resten nedenfor er fra andre steder.

Table eksempel #1 fra https://css-tricks.com/complete-guide-table-element/

table {
  border-collapse: collapse;
}

td, th {
  border: 1px solid #999;
  padding: 0.5rem;
  text-align: left;
}

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>ID</th>
      <th>Favorite Color</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jim</td>
      <td>00001</td>
      <td>Blue</td>
    </tr>
    <tr>
      <td>Sue</td>
      <td>00002</td>
      <td>Red</td>
    </tr>
    <tr>
      <td>Barb</td>
      <td>00003</td>
      <td>Green</td>
    </tr>
  </tbody>
</table>

For å få til denne som en egen selvstendig multi stylet på denne siden blant mange, fungerte følgende:

.cgte1 {
  border-collapse: collapse;
}

.cgte1 td, 
.cgte1 th {
  border: 1px solid #999;
  padding: 0.5rem;
  text-align: left;
}

+

<table class="cgte1"> etc.

Table eksempel #2 fra https://css-tricks.com/complete-guide-table-element/

table {
  border-spacing: 0.5rem;
}
td {
  padding: 0.5rem;
}

td:nth-child(1) { background: hsl(150, 50%, 50%); }
td:nth-child(2) { background: hsl(160, 60%, 50%); }
td:nth-child(3) { background: hsl(170, 70%, 50%); }
td:nth-child(4) { background: hsl(180, 80%, 50%); }
td:nth-child(5) { background: hsl(190, 90%, 50%); }
td:nth-child(6) { background: hsl(200, 99%, 50%); }

<table>
  <tr>
    <td>This</td>
    <td>Little</td>
    <td>Piggy</td>
    <td>Went</td>
    <td>To</td>
    <td>Market</td>
  </tr>
  <tr>
    <td colspan="2">This</td>
    <td>Little</td>
    <td>Piggy</td>
    <td>Went</td>
    <td>To</td>
  </tr>
    <tr>
    <td colspan="4">This</td>
    <td rowspan="3">Little</td>
    <td>Piggy</td>
  </tr>
  <tr>
    <td rowspan="2">This</td>
    <td>Little</td>
    <td>Piggy</td>
    <td>Went</td>
    <td>To</td>
  </tr>
  <tr>
    <td>Little</td>
    <td>Piggy</td>
    <td>Went</td>
    <td>To</td>
  </tr>
</table>

Table eksempel #3 fra https://css-tricks.com/complete-guide-table-element/

#table-example-1 { 
  border: solid thin; 
  border-collapse: collapse; 
}
#table-example-1 caption { 
  padding-bottom: 0.5em; 
}
#table-example-1 th, 
#table-example-1 td { 
  border: solid thin;
  padding: 0.5rem 2rem;
}
#table-example-1 td {
  white-space: nowrap;
}
#table-example-1 th { 
  font-weight: normal; 
}
#table-example-1 td { 
  border-style: none solid; 
  vertical-align: top; 
}
#table-example-1 th { 
  padding: 0.2em; 
  vertical-align: middle; 
  text-align: center; 
}

#table-example-1 tbody td:first-child::after { 
  content: leader(". "); '
}

body {
  padding: 1rem;
}

<table id="table-example-1"><caption>Specification values: <b>Steel</b>, <b>Castings</b>,
   Ann. A.S.T.M. A27-16, Class B;* P max. 0.06; S max. 0.05.</caption>
   <thead><tr><th rowspan="2">Grade.</th>
     <th rowspan="2">Yield Point.</th>
     <th colspan="2">Ultimate tensile strength</th>
     <th rowspan="2">Per cent elong. 50.8 mm or 2 in.</th>
     <th rowspan="2">Per cent reduct. area.</th>
    </tr><tr><th>kg/mm<sup>2</sup></th>
     <th>lb/in<sup>2</sup></th>
    </tr></thead><tbody><tr><td>Hard</td>
     <td>0.45 ultimate</td>
     <td>56.2</td>
     <td>80,000</td>
     <td>15</td>
     <td>20</td>
    </tr><tr><td>Medium</td>
     <td>0.45 ultimate</td>
     <td>49.2</td>
     <td>70,000</td>
     <td>18</td>
     <td>25</td>
    </tr><tr><td>Soft</td>
     <td>0.45 ultimate</td>
     <td>42.2</td>
     <td>60,000</td>
     <td>22</td>
     <td>30</td>
    </tr></tbody>
</table>

PB: Jeg har lagt til FARGENE (red + blue) for å få frem hva som styres hvor, og at den virker. Var opprinnelig ikke lagt inn noen farge.

For å fake BODY la jeg tabellen heller inn i en DIV.

<div style="padding: 1rem;">
<table id="table-example-1"> etc.

Table eksempel #4 fra https://css-tricks.com/complete-guide-table-element/

Gangetabellen. Venstre kolonne og topprad er begge stylet annerledes, ved å sette inn TH der det vanligvis ville vært TD.

body {
  padding: 1rem;
}

td, th {
  width: 4rem;
  height: 2rem;
  border: 1px solid #ccc;
  text-align: center;
}
th {
  background: lightblue;
  border-color: white;
}

<table>
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
    <th>5</th>
  </tr>
  <tr>
    <th>2</th>
    <td>4</td>
    <td>6</td>
    <td>8</td>
    <td>10</td>
  </tr>
  <tr>
    <th>3</th>
    <td>6</td>
    <td>9</td>
    <td>12</td>
    <td>15</td>
  </tr>
  <tr>
    <th>4</th>
    <td>8</td>
    <td>12</td>
    <td>16</td>
    <td>20</td>
  </tr>
  <tr>
    <th>5</th>
    <td>10</td>
    <td>15</td>
    <td>20</td>
    <td>25</td>
  </tr>
</table>

For å fake BODY la jeg tabellen heller inn i en DIV.

<div style="padding: 1rem;">
<table class="gangtabx3"> etc.

PB: Utvidet versjon, av meg.

col

If a col element has a parent and that is a colgroup element that itself has a parent that is a table element, then the col element represents one or more columns in the column group represented by that colgroup.

***********************

colgroup

The colgroup element represents a group of one or more columns in the table that is its parent, if it has a parent and that is a table element.

If the colgroup element contains no col elements, then the element may have a span content attribute specified, whose value must be a valid non-negative integer greater than zero.

***********************

dd

The dd element represents the description, definition, or value, part of a term-description group in a description list (dl element).

address

The address element represents the contact information for the section it applies to. If it applies to the body element, then it instead applies to the document as a whole.

article

The article element represents a section of a page that consists of a composition that forms an independent part of a document, page, or site. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, or any other independent item of content.

PB!!!: TABELLER - HELT RENE HTML - KUN CLASS ELLER ID - ALT STYRES MED CSS

borres.hiof.no: Tabeller

https://borres.hiof.no/wep/css/tabeller/index.html

Table(tab1)

table#tab1 {border-collapse: collapse;}
table#tab1  td{border-style:solid;padding:10px}
table#tab1 thead  td{color:red}
table#tab1 tfoot  td{color:blue}
table#tab1 tbody tr:nth-child(2n){background-color:gray}
table#tab1 tbody td:nth-child(2n){background-color:yellow}

<h3>Table(tab1)</h3>
<table id="tab1">
<thead>
	<tr>
		<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
	</tr>
</thead>
<tbody>
	<tr>
		<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
	</tr>
	<tr>
		<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
	</tr>
	<tr>
		<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
	</tr>
</tbody>
<tfoot>
	<tr>
		<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
	</tr>
</tfoot>
</table>

Table(tab2) PB: Samme HTML tabell

table#tab2 {border-collapse: collapse;}
table#tab2  td{padding:10px}
table#tab2 thead  td{border-bottom-style:solid}
table#tab2 tfoot  td{border-top-style:solid}
table#tab2 tbody td+td{border-left-style:solid}

Table(tab3)

.dbresult div{font-style:italic;font-size:15px;font-weight:bold;
             padding-top:10px}
.dbresult table{font: 11px/24px Verdana, Arial, Helvetica, sans-serif;
              border-collapse:collapse; width: 400px;}
.dbresult th{padding: 0 0.5em; text-align:left; 
            border: 1px solid #CCC;border-top-style:none}
.dbresult th:last-child{ border-right-style:none}
.dbresult th:first-child{ border-left-style:none}
.dbresult td{border-bottom: 1px solid #CCC; padding: 0 0.5em;}
.dbresult td:first-child {width: 40px;text-transform:capitalize}
.dbresult td+td {border-left: 1px solid #CCC; text-align: left;}
.dbresult td:last-child{ text-align: center;}

<h3 style="clear:both">Table(dbresult)</h3>
<p>Tabellen nedenfor er styrt av følgende stildefinisjon:</p>
<div class="dbresult">
<div>Noen tilfeldige viner fra Spania</div>
<table>
  <thead>
	<tr>
	  <th>Type</th>
<th>Navn</th>
<th>Terningkast</th>
	</tr>
  </thead>
  <tbody>
	<tr>
	  <td>red</td>
<td>Casa de la Ermita Monastrell 2002</td>
<td>5</td>
	</tr>
	<tr>
	  <td>red</td>
<td>Castillo de Aguarn Garnacha 2001</td>
<td>4</td>
	</tr>
	<tr>
	  <td>red</td>
<td>Preferido Tempranillo 1998</td>
<td>4</td>
	</tr>
	<tr>
	  <td>red</td>
<td>Pirineos Merlot-Cabernet 2000</td>
<td>4</td>
	</tr>
	<tr>
	  <td>red</td>
<td>Marqus de Ballestar Reserva 1999</td>
<td>4</td>
	</tr>
  </tbody>
</table>
</div>

Tabell(tab4)

.tab4 table{font: 11px/24px Verdana, Arial, Helvetica, sans-serif;
          border-collapse:collapse; width: 250px; 
          border:2px solid blue}
.tab4 thead {background-color:yellow;}
.tab4 td{border-bottom: 1px solid #CCC; padding: 0 0.5em;}
.tab4 td+td {border-left: 1px solid #CCC; text-align: left;}
.tab4 td:nth-child(2){text-transform:uppercase;}
.tab4 td:last-child{text-align: right;}
.tab4 tr:last-child{border-bottom:2px solid blue}

<div class="tab4">
<div>Olympiske sprintresultater </div>
<table>
  <thead>
	<tr>
	  <th colspan="3">Resultater 100 Barcelona 1992</th>
	</tr>
  </thead>
  <tbody>
	<tr>
	  <td>Linford Christie</td>
<td>Gbr</td>
<td>9.96</td>
	</tr>
	<tr>
	  <td>Frank Fredericks</td>
<td>Nam</td>
<td>10.02</td>
	</tr>
	<tr>
	  <td>Dennis Mitchell</td>
<td>Nam</td>
<td>10.04</td>
	</tr>
	<tr>
	  <td>Bruny Surin</td>
<td>can</td>
<td>10.09</td>
	</tr>
	<tr>
	  <td>Leroy Burrell</td>
<td>NGR</td>
<td>10.12</td>
	</tr>
  </tbody>
</table>
</div>

nedenfor er ? egentlig små b