HTML BASICS
1
Agenda
HTML Tables
HTML Table attributes
HTML Marquee tag
Marquee tag attributes
2
HTML Tables
The HTML tables allow web authors to arrange
data like text, images, links, other tables, etc.
into rows and columns of cells.
The HTML tables are created using 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.
3
Example
4
Example
5
Table Heading
Table heading can be defined using <th>
tag. This tag will be put to replace <td>
tag, which is used to represent actual data
cell. Normally you will put your top row as
table heading as shown below, otherwise
you can use <th> element in any row.
6
Example
7
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 border attribute:
8
Example
9
Collapsed Borders
If you want the borders to collapse into one
border, add the CSS border-collapse
property:
10
Cellpadding and Cellspacing Attributes
There are two attributes called cellpadding and
cellspacing which you will use to adjust the white
space in your table cells. The cellspacing
attribute defines the width of the border, while
cellpadding represents the distance between cell
borders and the content within a cell.
11
Example
12
Colspan and Rowspan Attributes
You will use colspan attribute if you want
to merge two or more columns into a
single column. Similar way you will use
rowspan if you want to merge two or more
rows.
13
Example
14
Table Background
You can set table background using one of the
following two ways:
bgcolor attribute - You can set background
color for whole table or just for one cell.
background attribute - You can set background
image for whole table or just for one cell.
You can also set border color also using
bordercolor attribute.
15
Example
16
Example
17
Table Height and Width
You can set a table width and height using
width and height attributes. You can
specify table width or height in terms of
pixels or in terms of percentage of
available screen area.
18
Example
19
Table Caption
The caption tag will serve as a title or
explanation for the table and it shows up
at the top of the table. This tag is
deprecated in newer version of
HTML/XHTML.
20
Example
21
Table Header, Body, and Footer
Tables can be divided into three portions:
a header, a body, and a foot. The head
and foot are rather similar to headers and
footers in a word-processed document that
remain the same for every page, while the
body is the main content holder of the
table.
22
Cont’d
The three elements for separating the head,
body, and foot of a table are:
<thead> - to create a separate table header.
<tbody> - to indicate the main body of the table.
<tfoot> - to create a separate table footer.
A table may contain several <tbody> elements to
indicate different pages or groups of data. But it
is notable that <thead> and <tfoot> tags should
appear before <tbody>
23
Example
24
HTML Marquee Tag
An HTML marquee is a scrolling piece of text
displayed either horizontally across or vertically
down your webpage depending on the settings.
This is created by using HTML <marquees> tag.
Note: The HTML <marquee> tag may not be
supported by various browsers so its not
recommended to rely on this tag, instead you
can use Javascript and CSS to create such
effects.
25
Syntax
A simple syntax to use HTML <marquee> tag is
as follows:
<marquee>This is an example of marquee tag.</marquee>
26
The <marquee> Tag Attributes
27
28