0% found this document useful (0 votes)

39 views

South East Asian Institute of Technology, Inc. National Highway, Crossing Rubber, Tupi, South Cotabato

This document provides an outline for a course on web development. It covers using tables to represent data through HTML elements like <table>, <tr>, <td>, and <th>. It discusses creating a basic table structure and adding captions, spanning columns and rows, and using <thead>, <tbody>, and <tfoot> to distinguish sections. The document also covers adjusting width and spacing, and adding borders and backgrounds to tables. The intended learning objectives are to understand how to use the key elements to create tables and represent complex data visually.

Uploaded by

Louie Jay Flores Candame

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

39 views

South East Asian Institute of Technology, Inc. National Highway, Crossing Rubber, Tupi, South Cotabato

Uploaded by

Louie Jay Flores Candame

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 11

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.

National Highway, Crossing Rubber, Tupi, South Cotabato

COLLEGE OF INFORMATION AND COMMUNICATION TECHNOLOGY

___________________________________________________

IT 123: Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.

Page 1 of 11
LEARNING MODULE
FOR
IT 123: WEB DEVELOPMENT 1

_____________________________________________________

WEEK 6

COURSE OUTLINE

COURSE CODE : IT 123

TITLE : Web Development 1
TARGET POPULATION : All BS Information Technology Students
INSTRUCTOR : MS. JESIERYN M. OLANGCA

Content:

Tables
IT 123: Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.

Page 2 of 11
⮚ How to create tables
⮚ What information suits tables
⮚ How to represent complex data in tables

Objectives:

General Objective

⮚ To know how to use the four key elements for creating tables.
⮚ To know how to represent complex data using tables.
⮚ To know how to add captions to tables.

Instruction to the Learner

Each chapter in this module contains a major lesson involving the basics of Web page coding and
HTML editing tool. The units are characterized by continuity, and are arranged in such a manner that the
present unit is related to the next unit. For this reason, you are advised to read this module. After each
unit, there are exercises to be given. Submission of task given will be every Monday during your
scheduled class hour.

IT 123: Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.

Page 3 of 11
What’s a Table?
A table represents information in a grid format. Examples of tables include financial reports, TV
schedules, and sports results.
Grids allow us to understand complex data by referencing information on two axes. Each block in the
grid is referred to as a table cell. In HTML a table is written out row by row.
Basic HTML Structure

HTML Table Example

Number First Name Last Name Points

1 Eve Jackson 94

2 John Doe 80

3 Adam Johnson 67

4 Jill Smith 50

Defining HTML Tables

<!DOCTYPE html>
<html>
<head>
<body>
<table style="width:100%">
  <tr>
  <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
Example Explained:
❖ Tables are defined with the <table> tag. The <table> element is used to create a table.
❖ Tables are divided into table rows with the <tr> tag. It indicate the start of each row using the
opening <tr> tag. (The tr stands for table row.)
❖ Table rows are divided into table data with the <td> tag.
❖ A table row can also be divided into table headings with the <th> tag.

Table Headings
The <th> element is used just like the <td> element but its purpose is to represent the heading for either
a column or a row. (The th stands for table heading.) Even if a cell has no content, you should still use a
<td> or <th> element to represent the presence of an empty cell otherwise the table will not render
correctly. (The first cell in the first row of this example shows an empty cell.)

IT 123: Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.

Page 4 of 11
Example
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<th></th>
<th scope="col">Saturday</th>
<th scope="col">Sunday</th>
</tr>
<tr>
<th scope="row">Tickets sold:</th>
<td>120</td>
<td>135</td>
</tr>
<tr>
<th scope="row">Total sales:</th>
<td>$600</td>
<td>$675</td>

Output

Spanning Columns
Sometimes you may need the entries in a table to stretch across more than one column.

The colspan attribute can be used on a <th> or <td> element and indicates how many columns that cell
should run across. In the example on the right you can see a timetable with five columns; the first
column contains the heading for that row (the day), the remaining four represent one hour time slots.

IT 123: Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.

Page 5 of 11
Example
<!DOCTYPE html>
<html>
<head>
<body>
<table>
<tr>
<th></th>
<th>9am</th>
<th>10am</th>
<th>11am</th>
<th>12am</th>
</tr>
<tr>
<th>Monday</th>
<td colspan="2">Geography</td>
<td>Math</td>
<td>Art</td>
</tr>
<tr>
<th>Tuesday</th>
<td colspan="3">Gym</td>
<td>Home Ec</td>
</tr>

Output

Note: I added some CSS styles to this example so that you can see how the cells span more than one
column. You will learn how to do this as we continue tackling about tables.

IT 123: Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.

Page 6 of 11
Spanning Rows
The rowspan attribute can be used on a <th> or <td> element to indicate how many rows a cell should
span down the table.
Example
<!DOCTYPE html>
<html>
<head>
<body>
<table>
<tr>
<th></th>
<th>ABC</th>
<th>BBC</th>
<th>CNN</th>
Output
</tr>
<tr>
<th>6pm - 7pm</th>
<td rowspan="2">Movie</td>
<td>Comedy</td>
<td>News</td>
</tr>
<tr>
<th>7pm - 8pm</th>
<td>Sport</td>
<td>Current Affairs</td>
</tr>
</table>

Note: I added some CSS styles to this example so that you can see how the cells span more than one
column. You will learn how to do this as we continue tackling about tables.

Long tables
There are three elements that help distinguish between the main content of the table and the first and
last rows (which can contain different content). These elements help people who use screen readers and
also allow you to style these sections in a different manner than the rest of the table (as you will see
when you learn about CSS).

<thead>
The headings of the table should sit inside the element.

<tbody>
The body should sit inside the element.

<tfoot>
The footer belongs inside the element.

IT 123: Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.

Page 7 of 11
Example Output
<!DOCTYPE html>
<html>
<head>
<body>
<table>
<thead>
<tr>
<th>Date</th>
<th>Income</th>
<th>Expenditure</th>
</tr>
</thead>
<tbody>
<tr>
<th>1st January</th>
<td>250</td> Note:
<td>36</td> By default, browsers rarely treat the content of
</tr> these elements any differently than other
<tr> styles to change their appearance.
<th>2nd January</th> Part of the reason for having separate <thead>
<td>285</td> and <tfoot> elements is so that, if you have a
<td>48</td> table that
</tr> is taller than the screen (or, if printed, longer
 than one page) then the browser can keep the
<tr> header and
<th>31st January</th> footer visible whilst the contents of the table
<td>129</td> scroll. This is intended to make it easier for
<td>64</td> users to see which column the data is in
</tr> (however this
</tbody> functionality is not implemented by default in
<tfoot> any current browser).
<tr>
<td></td>
<td>7824</td>
<td>1241</td>
</tr>
</tfoot>
</table>
<body>
</html>

IT 123: Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.

Page 8 of 11
Width & Spacing
The width attribute was used on the opening <table> tag to indicate how wide that table should be and
on some opening <th> and <td> tags to specify the width of individual cells. The value of this attribute is
the width of the table or cell in pixels. The columns in a table need to form a straight line, so you often
only see the width attribute on the first row (and all subsequent rows would use that setting).

Example Output

IT 123: Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.

Page 9 of 11
Border &Background
The border attribute was used on both the <table> and <td> elements to indicate the width of the
border in pixels. The bgcolor attribute was used to indicate background colors of either the entire table
or individual table cells.

Example
<!DOCTYPE html>
<html>
<head>
<body>
<table border="2" bgcolor="#efefef">
<tr>
<th width="150"></th>
<th>Withdrawn</th>
<th>Credit</th>
<th width="150" bgcolor="#cccccc">Balance</th>
</tr>
<tr>
<th>January</th>
<td>250.00</td>
<td>660.50</td>
<td bgcolor="#cccccc">410.50</td>
</tr>
<tr>
<th>February</th>
<td>135.55</td>
<td>895.20</td>

Output

Note:
This example uses the HTML border and bgcolor attributes. No CSS attributes were utilized in this
example.
When building a new website you should use CSS to control the appearance of the table rather than
these attributes. They are only covered here because you may come across them if you look at the code
of older websites.

Review Questions
1. Why do Web designers prefer to use tables instead of frames?
IT 123: Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.

Page 10 of 11
2. Briefly discuss what a table in HTML is.
3. Why is it necessary to use tables in page design?
4. What are the advantages and disadvantages of fixed design when it comes to HTML tables?
5. Define the difference between fixed and flexible web page design.

Test Yourself
1. Write the necessary HTML code for your own study timetable. This should look similar to the
one shown below. (Hint: use the colspan and rowspan attributes)

1. Write an HTML code to form a table to show the below values in a tabular form with heading
aas Roll No., Student Name, Subject Name, and values as

Challenge!
1. In your HTML file “gallery.html” try to insert images inside the table.
2. Add some styles in adding images on the table.
3. Then create a new HTML file and save it as “contents.html”.
In your new html file try to put any offered services/products depends on your website that you have
chosen using the table tags.