HTML

Lists

You can make ordered and unordered lists

Ordered lists

An ordered list are lists where each item is numbered.
The ordred list is created with <ol> element, where each item in list is placed with a <li> tag
I love..

  1. HTML & CSS
  2. JavaScript
  3. C#
<ol>
<li>HTML & CSS</li>
<li>JavaScript</li>
<li>C#</li>
</ol>
1.6.1 Example

Unordered lists

An unordered list are lists there begins with a bullet.
It is often used to make a navigation on the site
I like..

<ul>
<li>Dogs</li>
<li>JavaScript</li>
<li>Pokemons</li>
</ul>
1.6.2 Example

HTML Description Lists

HTML also supports description lists.
A description list is a list of terms, with a description of each term

Coffee
- black hot drink
Milk
- white cold drink
<dl>
<dt>Coffee</dt>
<dd>- black hot drink<dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
1.6.3 Example

<dd> Defines a description list.
<dt> Defines a term in a description list
<dd> Describes the term in a description list

Tables

Do you have a lot of data about your favorite animal? Do you need a overview over a timeplan? Maybe a school plan?
Do you want to make it pretty? Then you can make a HTML table.
A table is not responsive. DO NOT use it for layout design

Information about tables
Table header 1
Table data 1
1.6.5 Example

Table tag

To define a table, must you use the table element.

<table>
</table>
1.6.6 Example

Table caption

Inside the table can you make a caption, to tell the user, what the table is about

<table>
<caption>Information about tables</caption>
</table>
1.6.7 Example
Information about tables
Visuel example of 1.6.7

Table row

Each table row is defined with a tr tag. This code must be inside the table tag

<table>
<caption>Information about tables</caption>
<tr>
</tr>
</table>
1.6.8 Example
Information about tables
Visuel example of 1.6.8

Table header

Inside the table row is there defined a th tag or a td tag.
The th tag is by default bold and centered

<table>
<caption>Information about tables</caption>
<tr>
<th>Table header</th>
</tr>
</table>
1.6.8 Example
Information about tables
Table header
Visuel example of 1.6.9

Table data/cell

The td tag is by default regular and left-aligned.

<table>
<caption>Information about tables</caption>
<tr>
<th>Table header</th>
</tr>
<tr>
<td>Table data</td>
</tr>
</table>
1.6.9 Example
Information about tables
Table header
Table data
Visuel example of 1.6.9

Table with one table header row and table elements

Id you wont more that one heading can you inset a td tage more inside the table row tr

<table>
<caption>Information about tables</caption>
<tr>
<th>Table header 1</th>
<th>Table header 2</th> </tr>
<tr>
<td>Table data 1</td>
<td>Table data 2</td>
</tr>
</table>
1.6.10 Example
Table header 1 Table header 2
Table data 1 Table data 2
Visuel example of 1.6.10

Tips and tricks

It can be difficult to make tables, but here is some tips and tricks

Keep it simple

It’s usually better to break up complex tables into simple individual tables, each containing the data for one sub-topic.

Table separation

If several tables follow one another, don’t use a single table and put in an additional row of <th> cells. Screen readers may read aloud all <th> cells in a column, resulting in confusion

Flexibility

Due to the layout model of tables, they sometimes don’t fit on small screens small or are too wide if the user is zooming in. In such circumstances, it’s important that the table isn’t cut off (for example by using overflow: hidden in CSS). In these tutorials overflow: scroll is applied to an element wrapping the table so users can scroll through the table horizontally but there are much more options to display table in such circumstances.

.cssTable{ 
overflow: scroll
}