Lecture

Website 4

Design
HTML, CSS and
JavaScript
By Yahuza
Yakubu
HTML Tabl
es
 HTML
•
Table
Tables are defined with the <table> tag.
• Tables are divided into table rows with the <tr> tag.
• Each row is divided into data cells (with the <td> tag).
• The letters td stands for table data, which is the content
of a data cell.
• A data cell can contain text, images, lists, paragraphs,
forms, horizontal rules, tables, etc.
• A table row can also be divided into table headings with
the <th> tag.
 HTML
• <table>
<tr>
Table
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
 HTML
Table
HTML Table with a Border Attribute
• To display a table with borders, you will use the border
attribute.
• If you do not specify a border for the table, it will be
displayed without borders.
A border can be added using the border attribute:

border="1"
To add a caption to a table, use the <caption> tag:
 HTML
Table
HTML Table Headings
• Table headings are defined with the <th> tag.
• By default, all major browsers display table
headings as bold and centered:
<tr>
<th>Firstname</th>

<th>Lastname</th>
<th>Points</th>
</tr>
 HTML
Table
Cell Padding and Spacing
The <table> tag has two attributes known as cellspacing and
cellpadding
 Cellspacing is the pixel width between the individual data
cells in the table (The thickness of the lines making the table
grid).
 The default is zero. If the border is set at 0, the cellspacing
lines will be invisible.

<table border="1" cellspacing =“5">

 HTML
Table
 Cellpadding is the pixel space between the cell contents
and the cell border. The default for this property is also zero.
 This feature is not used often, but sometimes comes in handy
when you have your borders turned on and you want the
contents to be away from the border a bit for easy viewing.

<table border="1" cellpadding=“10">

 HTML
Table Width Attribute
Table
• The width attribute can be used to define the width of your
table. It can be defined as a fixed width or a relative width.
• A fixed table width is one where the width of the table is
specified in pixels.
• A relative table width is specified as a percentage of the width
of the visitor's viewing window.

<table border="1" width=“80px">

<table border="1" width=“80%">
 HTML
Table
Table Cells that Span Many Columns
To make a cell span more than one column, use the colspan attribute:
<table border=“1” width=“50%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
 HTML
Table
Table Cells that Span Many Rows
To make a cell span more than one row, use the rowspan attribute:
<table border=“1” width=“50%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
Questions
?
HTML
Lists
 Unordered HTML
•
Lists
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):

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
 Unordered HTML
Lists
The Style Attribute
A style attribute can be added to an unordered list, to
define the style of the marker:
Style Description
list-style-type:disc The list items will be marked with
bullets (default)
list-style-type:circle The list items will be marked with
circles
list-style-type:square The list items will be marked with
squares
list-style-type:none The list items will not be marked
Example
<ul style="list-style-
type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
 Ordered HTML
•
Lists
An unordered list starts with the <ol> tag. Each list item starts
with the <li> tag.
• The list items will be marked with numbers:

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
 Unordered HTML
The Type Attribute
Lists
A type attribute can be added to an ordered list, to define
the type of the 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
Example
<ol type="i">
<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:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
 Nested HTML
Lists
List can be nested (lists inside lists):
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black
tea</li>
<li>Green
tea</li>
Note:
</ul> List items can contain new list, and other
</li> HTML elements, like images and links, etc.
<li>Milk</li>
 Chapter
Summary
 Use the HTML <ul> element to define an unordered list
 Use the HTML style attribute to define the bullet style
 Use the HTML <ol> element to define an ordered list
 Use the HTML type attribute to define the numbering type
 Use the HTML <li> element to define a list item
 Use the HTML <dl> element to define a description list
 Use the HTML <dt> element to define the description term
 Use the HTML <dd> element to define the description data
 Lists can be nested inside lists
 List items can contain other HTML elements
Questions
?
The HTML
Style
Attribute
 The HTML Style
Attribute
Setting the style of an HTML element, can be done
with the style attribute.
The HTML style attribute has the following syntax:

style="property:value;"

The property is a CSS property. The value is a CSS value.

 HTML Background Color
The background-color property defines the background
color for an HTML element:
This example sets the background for a page to lightgrey
<body style="background-
color:lightgrey;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
 HTML Text
Color
The color property defines the text color for
an HTML element:
<h1 style="color:blue;">This is a
heading</h1>

<p style="color:red;">This is a
paragraph.</p>
 HTML
Fonts
The font-family property defines the font to be used
for an HTML element:

<h1 style="font-family:verdana;">This is a
heading</h1>
<p style="font-family:courier;">This is a
paragraph.</p>
 HTML Text
Size
The font-size property defines the text size for an
HTML element:

<h1 style="font-size:100px;">This is a
heading</h1>
<p style="font-size:3em;">This is a
paragraph.</p>
 HTML Text
Alignment
The text-align property defines the horizontal text
alignment for an HTML element:

<h1 style="text-align:center;">Centered
Heading</h1>
<p>This is a paragraph.</p>
 Chapter

Summary
Use the style attribute for styling HTML elements
 Use background-color for background color
 Use color for text colors
 Use font-family for text fonts
 Use font-size for text sizes
 Use text-align for text alignment
 Chapter
Summary
 HTML style Attributes
 Use the HTML style attribute to change background color
 Use the HTML style attribute to change text color
Questions
?