WEP4 and 5.pptx

HTML Tables
What is a table?
A table is a structured set of data made up of rows and columns
(tabular data). A table allows you to quickly and easily look up values
that indicate some kind of connection between different types of data,
for example a person and their age, or a day of the week, or the
timetable for a local swimming pool.
.

Table Cells
Each table cell is defined by a <td> and a </td> tag. td stands for table
data.
Everything between <td> and </td> are the content of the table cell.
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
Note: A table cell can contain all sorts of HTML elements: text, images,
lists, links, other tables, etc.

Table Rows
Each table row starts with a <tr> and ends with a </tr> tag. tr stands for table
row.
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
You can have as many rows as you like in a table; just make sure that the
number of cells are the same in each row.
Note: There are times when a row can have less or more cells than another. You
will learn about that in a later chapter.

Table Headers
Sometimes you want your cells to be table header cells. In those cases use
the <th> tag instead of the <td> tag. th stands for table header.
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
By default, the text in <th> elements are bold and centered, but you can change that
with CSS.

HTML Table Tags
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for
formatting
<col> Specifies column properties for each column within a
<colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table

HTML Table Borders
HTML tables can have borders of different styles and shapes.
To add a border, use the CSS border property on table, th,
and td elements:
table, th, td {
border: 1px solid black;
}

Collapsed Table Borders
To avoid having double borders like in the example above, set the
CSS border-collapse property to collapse.
This will make the borders collapse into a single border:
table, th, td {
border-collapse: collapse;
}

Style Table Borders
If you set a background color of each cell, and give the border a white
color (the same as the document background), you get the impression of
an invisible border:
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}

Round Table Borders
With the border-radius property, the borders get rounded corners:
table, th, td {
border-radius: 10px;
}

Round Table Borders
Skip the border around the table by leaving out table from the css
selector:
th, td {
border-radius: 10px;
}

Dotted Table Borders
With the border-style property, you can set the appearance of the border.
The following values are allowed:
th, td {
border-style: dotted;
}

Border Color
With the border-color property, you can set the color of the border.
th, td {
border-color: #96D4D4;
}

HTML Table Sizes
HTML tables can have different sizes for each column, row or the entire
table.
Use the style attribute with the width or height properties to specify the
size of a table, row or column.

HTML Table Width
To set the width of a table, add the style attribute to the <table> element:
Set the width of the table to 100%:
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Note: Using a percentage as the size unit for a width means how wide will this
element be compared to its parent element, which in this case is
the <body> element.

HTML Table Column Width
To set the size of a specific column, add the style attribute on
a <th> or <td> element:
Set the width of the first column to 70%:
<tr>
<th style="width:70%">Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

HTML Table Row Height
To set the height of a specific row, add the style attribute on a table row
element:
Set the height of the second row to 200 pixels:
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr style="height:200px">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

HTML Table Headers
HTML tables can have headers for each column or row, or for many columns/rows.
Table headers are defined with th elements. Each th element represents a table cell.
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

Vertical Table Headers
To use the first column as table headers, define the first cell in each row as
a <th> element:
<table>
<tr>
<th>Firstname</th>
<td>Jill</td>
<td>Eve</td>
</tr>
<tr>
<th>Lastname</th>
<td>Smith</td>
<td>Jackson</td>
</tr>
<tr>
<th>Age</th>
<td>94</td>
<td>50</td>
</tr>
</table>

Align Table Headers
By default, table headers are bold and centered:
To left-align the table headers, use the CSS text-align property:
Example
th {
text-align: left;
}

Header for Multiple Columns
You can have a header that spans over two or more columns.
To do this, use the colspan attribute on the <th> element:
Example
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
.

Table Caption
You can add a caption that serves as a heading for the entire table.
To add a caption to a table, use the <caption> tag:
Example
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
Note: The <caption> tag should be inserted immediately after the <table> tag.

HTML Table Padding & Spacing
HTML tables can adjust the padding inside the cells, and also the space
between the cells.

HTML Table - Cell Padding
Cell padding is the space between the cell edges and the cell content.
By default the padding is set to 0.
To add padding on table cells, use the CSS padding property:
Example
th, td {
padding: 15px;
}
To add padding only above the content, use the padding-top property.
And the others sides with the padding-bottom, padding-left, and padding-
right properties:
Example
th, td {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;
}

HTML Table - Cell Spacing
Cell spacing is the space between each cell.
By default the space is set to 2 pixels.
To change the space between table cells, use the CSS border-
spacing property on the table element:
Example
table {
border-spacing: 30px;
}

HTML Table Colspan & Rowspan
HTML tables can have cells that span over multiple rows and/or
columns.

HTML Table - Colspan
To make a cell span over multiple columns, use the colspan attribute:
Example
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>
Note: The value of the colspan attribute represents the number of columns to
span.

HTML Table - Rowspan
To make a cell span over multiple rows, use the rowspan attribute:
Example
<table>
<tr>
<th>Name</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>
Note: The value of the rowspan attribute represents the number of rows
to span.

HTML Table Styling- Zebra Stripes
Use CSS to make your tables look better.
If you add a background color on every other table row, you will get a nice
zebra stripes effect.
To style every other table row element, use the :nth-child(even) selector like
this:
Example
tr:nth-child(even) {
background-color: #D6EEEE;
}
Note: If you use (odd) instead of (even), the styling will occur on row 1,3,5 etc.
instead of 2,4,6 etc.

HTML Table - Vertical Zebra Stripes
To make vertical zebra stripes, style every other column, instead of
every other row.
Set the :nth-child(even) for table data elements like this:
Example
td:nth-child(even), th:nth-child(even) {
background-color: #D6EEEE;
}
Note: Put the :nth-child() selector on both th and td elements if you
want to have the styling on both headers and regular table cells.

Combine Vertical and Horizontal Zebra Stripes
You can combine the styling from the two examples above and you will
have stripes on every other row and every other column.
If you use a transparent color you will get an overlapping effect.
Use an rgba() color to specify the transparency of the color:
Example
tr:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}
th:nth-child(even),td:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}

Horizontal Dividers
If you specify borders only at the bottom of each table row, you will
have a table with horizontal dividers.
Add the border-bottom property to all tr elements to get horizontal
dividers:
Example
tr {
border-bottom: 1px solid #ddd;
}

Hoverable Table
Use the :hover selector on tr to highlight table rows on mouse over:
Example
tr:hover {background-color: #D6EEEE;}

HTML Table Colgroup
The <colgroup> element is used to style specific columns of a table.
If you want to style the two first columns of a table, use the <colgroup> and <col> elements.
The <colgroup> element should be used as a container for the column specifications.
Each group is specified with a <col> element.
The span attribute specifies how many columns that get the style.
The style attribute specifies the style to give the columns.
Note: There is a very limited selection of legal CSS properties for colgroups.
Example
<table>
<colgroup>
<col span="2" style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...

HTML Table Colgroup
Note: The <colgroup> tag must be a child of a <table> element and
should be placed before any other table elements,
like <thead>, <tr>, <td> etc., but after the <caption> element, if present.
Legal CSS Properties
There is only a very limited selection of CSS properties that are allowed
to be used in the colgroup:
width property
visibility property
background properties
border properties
All other CSS properties will have no effect on your tables.

Multiple Col Elements
If you want to style more columns with different styles, use
more <col> elements inside the <colgroup>:
<table>
<colgroup>
<col span="2" style="background-color: #D6EEEE">
<col span="3" style="background-color: pink">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...

Empty Colgroups
If you want to style columns in the middle of a table, insert a
"empty" <col> element (with no styles) for the columns before:
Example
<table>
<colgroup>
<col span="3">
<col span="2" style="background-color: pink">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...

Hide Columns
You can hide columns with the visibility: collapse property:
Example
<table>
<colgroup>
<col span="2">
<col span="3" style="visibility: collapse">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...

HTML Lists
HTML lists allow web developers to group a set of related items in lists.
Example
An unordered HTML list:
•Item
•Item
•Item
•Item
An ordered HTML list:
1. First item
2. Second item
3. Third item
4. Fourth item

HTML List Tags
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list

Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with
the <li> tag.
The list items will be marked with bullets (small black circles) by
default:
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with
the <li> tag.
The list items will be marked with numbers by default:
Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

HTML Description Lists
HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term
(name), and the <dd> tag describes each term:
Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

Unordered HTML List - Choose List Item Marker
The CSS list-style-type property is used to define the style of the list
item marker. It can have one of the following values:
Disc Sets the list item marker to a bullet (default)
Circle Sets the list item marker to a circle
Square Sets the list item marker to a square
None The list items will not be marked

Example - Disc
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Example - Circle
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Example - Square
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Example - None
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Nested HTML Lists
Lists can be nested (list inside list):
Example
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Note: A list item (<li>) can contain a new list, and other HTML
elements, like images and links, etc.

Horizontal List with CSS
HTML lists can be styled in many different ways with CSS.
One popular way is to style a list horizontally, to create a navigation menu:
Example
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

HTML Ordered Lists
The HTML <ol> tag defines an ordered list. An ordered list can be
numerical or alphabetical.
An ordered list starts with the <ol> tag. Each list item starts with
the <li> tag.
The list items will be marked with numbers by default:
Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Ordered HTML List - The Type Attribute
The type attribute of the <ol> tag, defines the type of the list item
marker:
Type Description
type="1“ The list items will be numbered with numbers (default)
type="A“ The list items will be numbered with uppercase letters
type="a“ The list items will be numbered with lowercase letters
type="I“ The list items will be numbered with uppercase roman
numbers
type="i“ The list items will be numbered with lowercase roman
numbers

Numbers:
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Uppercase Letters:
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Lowercase Letters:
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Uppercase Roman Numbers:
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Lowercase Roman Numbers:
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term
(name), and the <dd> tag describes each term:
Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
The <dl> HTML element represents a description list. The element
encloses a list of groups of terms (specified using the <dt> element) and
descriptions (provided by <dd> elements). Common uses for this
element are to implement a glossary or to display metadata (a list of
key-value pairs).

Single term and description
<dl>
<dt>Firefox</dt>
<dd> A free, open source, cross-platform, graphical web browser
developed by the Mozilla Corporation and hundreds of volunteers. </dd>

</dl>
Output:
Firefox
A free, open source, cross-platform, graphical web browser
developed by the Mozilla Corporation and hundreds of
volunteers.

Multiple terms, single description
<dl>
<dt>Firefox</dt>
<dt>Mozilla Firefox</dt>
<dt>Fx</dt>
<dd> A free, open source, cross-platform, graphical web browser developed
by the Mozilla Corporation and hundreds of volunteers. </dd>
</dl>
Output:
Firefox
Mozilla
FirefoxFx
A free, open source, cross-platform, graphical web browser developed by
the Mozilla Corporation and hundreds of volunteers.

Single term, multiple descriptions
<dl>
<dt>Firefox</dt>
<dd> A free, open source, cross-platform, graphical web browser developed by the Mozilla
Corporation and hundreds of volunteers. </dd>
<dd> The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a mostly
herbivorous mammal, slightly larger than a domestic cat (60 cm long).
</dd>
</dl>
Output:
Firefox
A free, open source, cross-platform, graphical web browser developed by the Mozilla
Corporation and hundreds of volunteers.
The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a mostly
herbivorous mammal, slightly larger than a domestic cat (60 cm long).
Multiple terms and descriptions
It is also possible to define multiple terms with multiple corresponding descriptions, by
combining the examples above.

Metadata
Description lists are useful for displaying metadata as a list of key-value
pairs.
<dl>
<dt>Name</dt>
<dd>Godzilla</dd>
<dt>Born</dt>
<dd>1952</dd>
<dt>Birthplace</dt>
<dd>Japan</dd>
<dt>Color</dt>
<dd>Green</dd>
</dl>
Tip: It can be handy to define a key-value separator in the CSS, such as:
dt::after { content: ": "; }

Wrapping name-value groups in div elements
WHATWG HTML allows wrapping each name-value group in a <dl> element in a <div> element. This can be
useful when using microdata, or when global attributes apply to a whole group, or for styling purposes.
<dl>
<div>
<dt>Name</dt>
<dd>Godzilla</dd>
</div>
<div>
<dt>Born</dt>
<dd>1952</dd>
</div>
<div>
<dt>Birthplace</dt>
<dd>Japan</dd>
</div>
<div>
<dt>Color</dt>
<dd>Green</dd>
</div>
</dl>
Notes
Do not use this element (nor <ul> elements) to merely create indentation on a page. Although it works, this is a
bad practice and obscures the meaning of description lists.
To change the indentation of a description term, use the CSS margin property.

WEP4 and 5.pptx

More Related Content

Similar to WEP4 and 5.pptx (20)

Recently uploaded (20)

WEP4 and 5.pptx