Introduction
Mozamel Jawad 19 October 2022
Defining an HTML Table
• An HTML table is defined with the <table> tag.
• Each table row is defined with the <tr> tag.
• A table header is defined with the <th> tag.
By default, table headings are bold and centered.
• A table data/cell is defined with the <td> tag.
2
3
HTML Table - Adding a Border
If you do not specify a border for the table, it will be displayed without borders.
A border is set using the CSS border property:
HTML Table - Collapsed Borders
If you want the borders to collapse into one border, add the CSS border-collapse
property:
4
HTML Table - Adding Cell Padding
Cell padding specifies the space between the cell content and its borders.
To set the padding, use the CSS padding property:
HTML Table – Text-align
To left-align the table headings, use the CSS text-align property:
5
HTML Table - Cells that Span Many Columns
To make a cell span more than one column, use the colspan attribute:
6
HTML Table - Cells that Span Many Rows
To make a cell span more than one row, use the rowspan attribute:
7
HTML Table - Adding a Caption
To add a caption to a table, use the <caption> tag:
8
HTML Table – <thead>, <tbody>, <tfoot>
9
HTML Lists
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:
10
Unordered HTML List
The CSS list-style-type property is used to define the style of the list item marker:
Value Description
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
11
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:
12
Ordered HTML List
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
13
HTML Block and Inline Elements
Every HTML element has a default display value
depending on what type of element it is.
The default display value for most elements is block or
inline.
14
Block-level Elements
A block-level element always starts on a new line and takes up the full
width available (stretches out to the left and right as far as it can).
The <div> element is a block-level element.
The <div> Element
The <div> element is often used as a container for other HTML elements.
The <div> element has no required attributes, but style, class and id are common
15
Inline Elements
An inline element does not start on a new line and only takes up as much width as
necessary.
This is an inline <span> element inside a paragraph
The <span> Element
The <span> element is often used as a container for some text.
The <span> element has no required attributes, but style, class and id are common.
16
HTML -> The class Attribute
The HTML class attribute is used to define equal styles for elements with the same
class name.
So, all HTML elements with the same class attribute will have the same format and
style.
In CSS, to select elements with a specific class,
write a period (.) character,
followed by the name of the class:
17
HTML -> The id Attribute
The id attribute specifies a unique id for an HTML element (the value must be
unique within the HTML document).
The id value can be used by CSS and JavaScript to perform certain tasks for a unique
element with the specified id value.
In CSS, to select an element with a specific id,
write a hash (#) character,
followed by the id of the element:
18
HTML Iframes
An iframe is used to display a web page within a web page.
Iframe Syntax
An HTML iframe is defined with the <iframe> tag:
Iframe - Set Height and Width
Use the height and width attributes to specify the size of the iframe.
19
Iframe - Remove the Border
By default, an iframe has a border around it.
To remove the border, add the style attribute and use the CSS border property:
Iframe - Target for a Link
An iframe can be used as the target frame for a link.
The target attribute of the link must refer to the name attribute of the iframe:
20
HTML File Paths
• Absolute File Paths
An absolute file path is the full URL to an internet file:
• Relative File Paths
A relative file path points to a file relative to the current page.
In this example, the file path points to a file in the images folder
located at the root of the current web:
21
The HTML <head> Element
• The <head> element is a container for metadata (data about data) and
is placed between the <html> tag and the <body> tag.
• HTML metadata is data about the HTML document. Metadata is not
displayed.
• Metadata typically define the document title, character set, styles,
links, scripts, and other meta information.
• The following tags describe metadata: <title>, <style>, <meta>, <link>,
<script>, and <base>.
22
The HTML <title> Element
• The <title> element defines the title of the document, and is required
in all HTML/XHTML documents.
The <title> element:
• defines a title in the browser tab
• provides a title for the page when it is added to favorites
• displays a title for the page in search engine results
23
The HTML <style> Element
The <style> element is used to define style information for a single
HTML page:
The HTML <link> Element
The <link> element is used to link to external style sheets:
24
The HTML <meta> Element
• The <meta> element is used to specify which character set is used,
page description, keywords, author, and other metadata.
• Metadata is used by browsers (how to display content), by search
engines (keywords), and other web services.
25
The HTML <meta> Element …
26
HTML Layout Elements
27
28
