College of Computer Studies: 454 Rizal Ave Ext Cor 9th Ave, Grace Park, Caloocan

454 Rizal Ave Ext Cor 9th Ave, Grace Park, Caloocan
COLLEGE OF COMPUTER STUDIES
Course Code : ITFUND

Course Title : Introduction to Computing
Module 5
HTML Tables
In this course, the students will be taught to create basic structure of HTML Tables and organize data using
tables.
At the end of this lesson, the student will be able to:
1. create a Table using HTML Table tags

2. specify the height and width size of the table
3. merge table cells in rows and columns
4. use different table tags for page layout
Table is an orderly arrangement of data distributed across a grid of rows and columns similar to a
spreadsheet. In printed documents, tables commonly serve a subordinate function, illustrating some point
described by accompanying text. Tables still perform this illustrative function in HTML documents.
However, because HTML alone does not offer the same layout capacities available to print designers, Web
page tables also are commonly used to structure a page for layout.
5.1 HTML Table
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 in which the <tr> tag is used to create table rows and
<td> tag is used to create data cells.
Table Heading, the text in <th> elements are bold and centered.
By default, the text in <td> elements are regular and left-aligned.
The only attribute used in this example is border, which is used to specify a 1-pixel border so it is clear
what the table looks like the only attribute used in this example is border, which is used to specify a 1
pixel border so it is clear what the table looks like.
“This module is designed and prepared in compliance with the Global Reciprocal Colleges requirement for a teaching load for the
1st Semester AY2020-2021 and regarded as an internal information of the institution for educational purpose only. Any form of
reproduction, distribution, publishing, and transmittal, either in part or as a whole, will be the sole responsibility of the lead
distributor. The author is not liable of any legal consequences that may arise thereafter.”
Example:
A table is made up of rows enclosed within <tr> … </tr>. The number of rows in the table is determined
by the number of occurrences of the tr element. What about columns? Generally, the number of columns
in a table is determined by the maximum number of data cells in one row indicated by <td> … </td>, or
headings indicated by <th> … </th> within the table. The headings for the table are set using the <th>
element. Generally, the browser renders the style of headings differently, usually centering the contents
of the heading and placing the text in bold style. The actual cells of the table are indicated by the td
element. Both the <td> and <th> elements can enclose an arbitrary amount of data of just about any type.
Here border is an attribute of <table> tag and it is used to put a border across all the cells. If you do not
need a border then you can use border="0".
Note: HTML table display no borders by default. The data will simply appear where is supposed to appear
according to the table specifications.
5.2 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, the value is measured in
pixels or percentage values. When using tables for layout, cells should jut up next to each other, so this
attribute is often set to 0, as in previous examples. However, it is possible to give space between cells by
setting this attribute to a positive integer or percentage value.
While cellpadding represents the distance between cell borders and the content within a cell, which is
also often set to 0 in tables used for layout.
Example:
5.3 Colspan and Rowspan Attributes
To make a cell span more than one column, use the colspan attribute
To make a cell span more than one row, use the rowspan attribute
Example:
Output:
5. 4 Table Caption, Table Header, Body, and Footer
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.
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.
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>
Example
5.5 Tables Backgrounds
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.
Example:
Output:
Example of using background attribute:
APPLICATION:
Create a html table tags that will have an output like this:
ASSESSMENT
NAME: _______________________________________________ SCORE: _________________
YEAR & SECTION: _______________________________________ DATE: _________________
Matching Type: Match the Column A to Column B. Write the letter of your answer in the space provided.
No. Column A Column B
1. This tag defines a HTML table. a) <td>
2. This tag defines table row b) <table>
3. This attribute used to make a cell span many columns c) <tr>
4. This attribute used to make a cell span many rows. d) rowspan
5. Used to add a border to a table e) <th>
6. f) border
7. This attribute used to set background image for whole table or g) background
just for one cell.
8. This attribute used to set background color for whole table or h) <tfoot>
just for one cell.
9. This attribute used to create a separate table footer. i) <tbody>
10. This attribute used to indicate the main body of the table. j) bgcolor

College of Computer Studies: 454 Rizal Ave Ext Cor 9th Ave, Grace Park, Caloocan

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

College of Computer Studies: 454 Rizal Ave Ext Cor 9th Ave, Grace Park, Caloocan

Загружено:

Авторское право:

Доступные форматы

454 Rizal Ave Ext Cor 9th Ave, Grace Park, Caloocan

COLLEGE OF COMPUTER STUDIES

Course Code : ITFUND

At the end of this lesson, the student will be able to:

1. create a Table using HTML Table tags

5.1 HTML Table

By default, the text in <td> elements are regular and left-aligned.

5.2 Cellpadding and Cellspacing Attributes

5.3 Colspan and Rowspan Attributes

table. This tag is deprecated in newer version of HTML/XHTML.

<thead> - to create a separate table header.

<tbody> - to indicate the main body of the table.

<tfoot> - to create a separate table footer.

5.5 Tables Backgrounds

Example of using background attribute:

NAME: _______________________________________________ SCORE: _________________

YEAR & SECTION: _______________________________________ DATE: _________________

No. Column A Column B

1. This tag defines a HTML table. a) <td>

2. This tag defines table row b) <table>

3. This attribute used to make a cell span many columns c) <tr>

4. This attribute used to make a cell span many rows. d) rowspan

5. Used to add a border to a table e) <th>

just for one cell.

just for one cell.

9. This attribute used to create a separate table footer. i) <tbody>

Вам также может понравиться

NAME: _______________________________ SCORE: _

YEAR & SECTION: _______________________ DATE: _