Web Basics – HTML5 Tables

Web Basics –
HTML5
Lesson 3: Tables

Page 03-1
Web Basics – HTML5 Tables

Lesson Objectives

➢After completing this module, you will be able to:

• Understand the structure of an HTML table.
• Controlling table format

Page 03-2
Web Basics – HTML5 Tables

3.1:Tables
Creating Tables
➢Table contains data in the format of rows and columns.
➢For an example, department information’s are displayed in the
tabular format as shown below

Deptno Dname Location

10 Accounting New York Row
20 Research Dallas
30 Sales Chicago
40 Operations Boston

Column named as “Deptno”

➢The above “Department” table contains 4 rows and 3 columns.

Tables

Tables are defined with the <table> tag. A table is divided into
rows (using <tr>), and each row is divided into data cells
(using <td>). Letters td stand 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.

Page 03-3
Web Basics – HTML5 Tables

3.1:Tables

Creating Tables
➢An HTML table can be created using <table> elements
• <table>
• Define an HTML table
• Other elements like <tr>, <caption>,.. can be nested inside <table> element

Header
➢An HTML table has two kinds of cells
• Header Cells Cells
• <th>
• Defines a table header
➢Standard Cells
• <tr>
• Defines a table row
• A row can have one or more <td> or <th> elements
➢<td>
• Defines a table cell data Standard
Cells

An HTML table has two kinds of cells:

• Header Cells: Contain header information (created
with the element).
• Standard Cells: Contain data (created with the td
element).
• The text in a th element is bold and centered.
• The text in a td element is regular and left-aligned.
<tr> stands for Table row
<td> stands for table data
<th> stands for table header

Page 03-4
Web Basics – HTML5 Tables

3.1:Tables

Creating Tables
➢Syntax

<table>
<tr>
<th>Column1 Header</th>
<th>Column2 Header</th>
</tr>
<tr>
<td>Cell 1,1</td>
<td>Cell 1,2</td>
</tr>
<tr>
<td>Cell 2,1</td>
<td>Cell 2,2</td>
</tr>
</table>

Page 03-5
Web Basics – HTML5 Tables

3.1:Tables

Creating Tables
➢Some more elements which can be used while creating tables are:
• <thead>
• Group header content in an HTML table
• <tbody>
• Group the body content in an HTML table
• <tfoot>
• Group footer content in an HTML table
• <caption>
• Defines a caption for the table
• <caption> element should follow with <table> element immediately.
• <caption> element value will be center aligned and displayed above the table

The table also has a few more tags to layout your data.
The <thead> tag is used to group the header content in an
HTML table.The <thead> element should be used in
conjunction with the <tbody> and <tfoot> elements.
The <tbody> element is used to group the body content in an
HTML table and the <tfoot> element is used to group the
footer content in an HTML table.
<tfoot> must appear before <tbody> within a table, so that a
browser can render the foot before receiving all the rows of
data.

Note that the <thead>,<tbody> and <tfoot> elements are

seldom used, because of bad browser support. Expect this to
change in future versions.

Page 03-6
Web Basics – HTML5 Tables

3.1:Tables

Creating Tables
➢Syntax

Table column headings:

<table>
<caption>This is table caption</caption>
<tr>
<th>COLUMN 1</th>
<th>COLUMN 2</th>
<th>COLUMN 3</th>
</tr>
</table>

Table Caption:
• The <caption> tag defines a table caption.
• The <caption> tag must be inserted immediately
after the <table> tag.
• You can specify only one caption per table. Usually
the caption will be centered above the table.

Table Headers:
The <th> tag defines a header cell in an HTML table.

Page 03-7
Web Basics – HTML5 Tables

3.1:Tables

Creating Tables
➢Syntax

<table>
<thead>
<tr><td>.....</td></tr>
</thead>
<tfoot>
<tr><td>.....</td></tr>
</tfoot>
<tbody>
<tr><td>....</td></tr>
<tbody>
</table>

Page 03-8
Web Basics – HTML5 Tables

3.1:Tables

Blank Data Cell (Code)

➢Inserting Blank Data Cell :
• <td></td>
• <td><br></td>

Blank Data Cell:

You can avoid missing a border around empty
cells. Add a non-breaking space (&nbsp;) to empty data cells,
to make the borders visible.

Page 03-9
Web Basics – HTML5 Tables

3.1:Tables

Creating Tables
➢Tableheading.html

Page 03-10
Web Basics – HTML5 Tables

3.1:Tables

Nested Tables (Code)

➢ A cell can contain another table within it.

<table>
<tr> <th>Zone</th> <th> State </th> </tr>
<tr> <td>South</td>
<td><table>
<tr> <th>Name</th> <th>Capital City</th> </tr>
<tr> <td>Karnataka</td> <td>Bangalore</td> </tr>
<tr> <td>Tamilnadu</td> <td>Chennai</td> </tr>
<tr> <td>Andhra Pradesh</td> <td>Hyderabad</td>
</tr>
</table></td></tr>
</table>

The table also has a few more tags to layout your data.
The <thead> tag is used to group the header content in an
HTML table.The <thead> element should be used in
conjunction with the <tbody> and <tfoot> elements.
The <tbody> element is used to group the body content in an
HTML table and the <tfoot> element is used to group the
footer content in an HTML table.
<tfoot> must appear before <tbody> within a table, so that a
browser can render the foot before receiving all the rows of
data.

Note that the <thead>,<tbody> and <tfoot> elements are

seldom used, because of bad browser support. Expect this to
change in future versions.

Page 03-11
Web Basics – HTML5 Tables

3.1:Tables

Demo
➢tabnest4.htm

Page 03-12
Web Basics – HTML5 Tables

3.2: Table Formatting

Table Formatting
➢Cell Spanning
• Table cells can span across more than one column or row.
• Types of cell spanning
• Row spanning
• Column spanning

➢Example of Colspan ➢ Example of Rowspan

Cell Spanning:
There are two types of cell spanning. Row and column
spanning.

Page 03-13
Web Basics – HTML5 Tables

3.2: Table Formatting

Cell Spanning (Code)

➢Row spanning/Column spanning:
• Use rowspan and colspan attribute either in <td> or <th> element.

<table>
<tr>
<th rowspan=m>Multiple Column Header</th>
<th colspan=n>Multiple Row Header</th>
</tr>
</table>

➢m & n are integers specifying number of rows and columns

respectively.

colspan="number of columns" ~
By default, the number of columns in a table is defined by
the number of table data cells appearing in the table row that
contains the most data. You would, typically place the same
number of data cells in each table row. If a table row does not
contain the requisite number of table cells, then it will
essentially be in 'error' and will be displayed with a missing
cell.

rowspan="number of rows" ~
Rowspan attribute works just like the colspan attribute
except that you may find the situation a little more difficult to
visualize when working with the source code. But once again
the principle is the same. By using the rowspan attribute, you
can force a table cell to span the number of rows specified by
the respective value.

Page 03-14
Web Basics – HTML5 Tables

3.2: Table Formatting

Cell Spanning Demo

➢Table-span.html

Page 03-15
Web Basics – HTML5 Tables

3.2: Table Formatting

Grouping of Columns
➢ <colgroup> tag specifies a group of one or more columns in a
table for formatting
➢ The <col> tag specifies column properties for each column within
a <colgroup> element.
➢ Use <colgroup> and <col> tags to group columns with common
properties like
• Span attribute :
• Identifies number of columns in the current group.
• Default value is 1
• Provide span attribute and omit <col> tag
➢ Example for grouping 3 columns and applying background color as
green
<table>
<colgroup span=“3” style=“background-color:green”> </colgroup>
<col>
<col>
<tr> table contents…… </tr>
</table>

colspan="number of columns" ~
By default, the number of columns in a table is defined by
the number of table data cells appearing in the table row that
contains the most data. You would, typically place the same
number of data cells in each table row. If a table row does not
contain the requisite number of table cells, then it will
essentially be in 'error' and will be displayed with a missing
cell.

rowspan="number of rows" ~
Rowspan attribute works just like the colspan attribute
except that you may find the situation a little more difficult to
visualize when working with the source code. But once again
the principle is the same. By using the rowspan attribute, you
can force a table cell to span the number of rows specified by
the respective value.

Page 03-16
Web Basics – HTML5 Tables

3.2: Table Formatting

Demo
➢ tabcol3.htm

<html><head><title>Table with Colgroup</title></head>

<body>
<table width="100%" frame="void">
<tr><th colspan="3">Ecommerce Stream</th>
<th colspan="4">Mainframe Stream</th>
<colgroup span="3" width="20%" bgcolor="orange">
<colgroup span="4" width="10%" bgcolor="lightgreen">
<tr><td>Internet/HTML<td>Javscript<td>Java
<td>CICS<td>COBOL<td>JCL<td>IMS
<tr><td>JSP<td>Servlet<td>Struts
<td>ADS/O<td>VSAM<td>IDMS<td>MVS
</table>
</html>

Page 03-17
Web Basics – HTML5 Tables

Lab

➢ Lab 2

Page 03-18
Web Basics – HTML5 Tables

Lesson Summary

➢ After completing this module you know:

• Structure of an HTML table
• Control table format such as cell spanning
• Use tables to format contents of an HTML Page.

Page 03-19
Web Basics – HTML5 Tables

Review - Questions

➢ Question 1: Cell spanning is used to joining cells

together to make a larger cell.
• True/False

➢ Question 2: The <col> tag defines the attribute

values for one or more columns in a table.
• True/ False

➢ Question 3: In which tag usage of

rowspan/colspan attribute is valid?
• <th>
• <tr>
• <td>
• None of the above

Page 03-20