Scribd
Upload
6 views

HTML Cont.

Uploaded by

Dhan Belgica
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

HTML Cont.

Uploaded by

Dhan Belgica
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 19

`

MODULE 08: Continuation TO HTML


INSTRUCTOR: EDAN A. BELGICA

Continuation TO HTML

HTML Favicon

A favicon is a small image displayed next to the page title in the browser tab.

How To Add a Favicon in HTML

You can use any image you like as your favicon. You can also create your own favicon on sites
like https://www.favicon.cc.

Tip: A favicon is a small image, so it should be a simple image with high contrast.

A favicon image is displayed to the left of the page title in the browser tab, like this:

To add a favicon to your website, either save your favicon image to the root directory of your
webserver, or create a folder in the root directory called images, and save your favicon image in
this folder. A common name for a favicon image is "favicon.ico".
`
Next, add a <link> element to your "index.html" file, after the <title> element, like this:

HTML Page Title

The <title> element adds a title to your page:


`
The title is shown in the browser's title bar:

The title should describe the content and the meaning of the page.

The page title is very important for search engine optimization (SEO). The text is used by search
engine algorithms to decide the order when listing pages in search results.

The <title> element:

• defines a title in the browser toolbar

• provides a title for the page when it is added to favorites

• displays a title for the page in search engine-results

So, try to make the title as accurate and meaningful as possible!

HTML Tables

HTML tables allow web developers to arrange data into rows and columns.

Define an HTML Table

A table in HTML consists of table cells inside rows and columns.


`
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.

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.

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.

By default, the text in <th> elements are bold and centered, but you can change that with CSS.

.HTML Table Borders

HTML tables can have borders of different styles and shapes.

How To Add a Border

To add a border, use the CSS border property on table, th, and td elements:
`
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:

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:

Round Table Borders

With the border-radius property, the borders get rounded corners:


`
Dotted Table Borders

With the border-style property, you can set the appearance of the border.

Border Color

With the border-color property, you can set the color of the border.
`
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:

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:
`
HTML Table Row Height

To set the height of a specific row, add the style attribute on a table row element:
`
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.

Vertical Table Headers

To use the first column as table headers, define the first cell in each row as a <th> element:
`
Align Table Headers

By default, table headers are bold and centered:

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

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:


`
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:


`
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:

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:
`
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:

HTML Table - Colspan

To make a cell span over multiple columns, use the colspan attribute:

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:

Note: The value of the rowspan attribute represents the number of rows to span.

HTML Table Styling

HTML Table - Zebra Stripes

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:

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:

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.

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:

Hoverable Table

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


`
HTML Table Colgroup

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.

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>:

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:
`
Hide Columns

You can hide columns with the visibility: collapse property:

References:

https://www.w3schools.com/html/html_basic.asp

https://www.w3schools.com/html/html_colors.asp

You might also like