Scribd
Upload
8 views

HTML-TABLE

Uploaded by

asnawirahsmith095
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

HTML-TABLE

Uploaded by

asnawirahsmith095
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

Commonwealth High School

Ecols st. Commonwealth Quezon City

GRADE 10- Information and Communications Technology

Name of Learner: ______________________________ Grade Level: _____________


Section: _____________________________________ Date: ___________________

TABLES

• Tables are used to present data for scientific research, sales figure, class schedules, and sports
statistics, among others.
• A table is useful to summarize data from a database search or a set of choices. With HTML
tables, its not just text that can be placed inside but as well as pictures, links and even video and
sounds.
• The basic parts of a table are columns, rows and cells. When making a table, you must be able to
identify the exact number of columns and rows that you will need followed by defining the cells
one by one. A cell is a rectangular region at the intersection of a row and column. A row is a
single horizontal line of data. A column is a single vertical line of data.

TABLE TAGS

TABLE TAG – Creates a basic table = <table> </table>


TABLE ROW TAG – Contains several cells = <tr> </tr>

TABLE DATA TAG – Creates individual cells = <td> </td>

TABLE ATTRIBUTE

BORDER = “0” (Borders are invisible)


BORDER = “1” (Borders are visible)
BORDER = “N” (If you increase the value greater than 1, it will make the border thicker.
<body>
ADDRESS BOOK
<table border=“1”>
<tr>
<td>NAME</td>
<td>BIRTHDAY</td>
<td>ADDRESS</td></tr>
<tr>
<td>Archie Santos</td>
<td>February 29</td>
<td>125 New South Wales, Australia</td></tr>
<tr>
<td>Yvette Catubig</td>
<td>December 25</td>
<td>Ontario, Canada/td></tr></table>
CREATING A HEADING

• To distinguish the heading from the rest of the data, use the <TH> tag to specify the header cell.
A closing tag is optional.
• The <TH> tag has four attributes:
Align
V-align
Colspan
Rowspan.

<body>
ADDRESS BOOK
<table border=“1”>
<tr>
<th>NAME</th>
<th>BIRTHDAY</th>
<th>ADDRESS</th></tr>
<tr>
<td>Archie Santos</td>
<td>February 29</td>
<td>125 New South Wales, Australia</td></tr>
<tr>
<td>Yvette Catubig</td>
<td>December 25</td>
<td>Ontario, Canada/td></tr></table>

ALIGNING CELLS

The align attribute specifies the alignment of the cell’s contents. You can align it at the center, left, right,
justify or decimal. If the alignment is not specified, the content of the cell will be displayed at the center.

<table border=“2”>
<tr><th>FOURTH YEAR</th></tr>
<tr align=“left”>
<td>2345</td></tr>
<tr align=“right”>
<td>1234</td></tr>
<tr align=“center”>
<td>5678</td></tr>
</table>

V-ALIGNING CELLS

• This attribute allows you to control the text inside the cells where it is aligned. You can display it
on the top, bottom, or vertically centered with in the cell.
• You can place V-align attribute inside a TR, TH, or TD.

<table border=“1”>
<tr>
<td rowspan=“3” valign=“top” align=“left”>ART</td>
</tr>
<tr>
<td rowspan=“3” valign=“bottom” align=“left”>MENDOZA</td>
</tr> >
<tr>
<td rowspan=“3” valign=“center” align=“left”>SANTOS</td></table>

SPANNING TABLE COLUMN AND ROW

A table heading oftentimes occupy more space than the rest. Spanning columns and rows enables you to
create interesting grids and to manage areas of space within a table more completely.
COLSPAN= To span a column
ROWSPAN = To span a row.

<body>
<center>
<table border=“3” color=“blue”
<tr>
<td colspan=“3” align=“center><font size=“6”>CLASS
SCHEDULE</font></td></tr>
<tr align=“center”>
<th>TIME</th><th>DAY</th><th>SUBJECT</th></tr>
</table>
</center>

<table border=“1”>
<tr>
<td rowspan=“2” valign=“top” align=“left”>4th Year Level</td>
<td valign=“top” align=“left”>1234</td>
<td valign=“top align=“left”>MALE</td>
</tr>
<td valign=“top” align=“left”>2345</td>
<td valign=“top align=“left”>FEMALE</td>
</table>
<!doctype html>
<html>
<head></head>
<title> Class Schedule</title>
<body bgcolor="pink">

<center>

<hr color="black" height="50">

<h3><font face="Algerian" color="blue">COMMONWEALTH HIGH SCHOOL</h3></font>


<h5><font face="Comic Sans MS">
Ecols st., Commonwealth</h5></font>
<h5><font face="Comic Sans MS">
2nd District, Quezon City</h5></font></center>
<table align="center" border="4" bordercolor="red" cellpadding="10" cellspacing="10">
<tr bordercolor="red">
<td align ="center"colspan="6">CLASS SCHEDULE </td>

<tr bordercolor="red">
<th align="center" width="250"><font face= "Arial Black" color="red">TIME</th>
<th align="center" width="250"><font face= "Arial Black" color="red">MONDAY</th>
<th align="center" width="250"><font face= "Arial Black" color="red">TUESDAY</th>
<th align="center" width="250"><font face= "Arial Black" color="red">WEDNESDAY</th>
<th align="center" width="250"><font face= "Arial Black" color="red">THURSDAY</th>
<th align="center" width="250"><font face= "Arial Black" color="red">FRIDAY</th>

</tr>
<tr bordercolor="red" >

<td align="center"><b>6:00-6:50</td>
<td align="center" width="350px" colspan="3"><b>TLE-ICT</b> <br/>
Mrs. C. Talisay</td>
<td align="center" width="350px" colspan="2"><b>Online Class</b> <br/>
Mrs. C. Talisay</td>
</tr>
<tr>

<td align="center"><b>9:20-9:45</td>
<td align="center" width="350px"colspan="5"><b>BREAKTIME</b> <br/>
</tr>

</table>
</body>
</html>
cellspacing cellpadding
table

Border
Bordercolor

colspan

CELLPADDING

• Cellpadding sets the amount of space (both horizontal and vertical between the cell wall and the
contents.
• The default value of cellpadding is 1.
• The text inside will look much better if you move it away from the border lines. It will look less
crowded.

<table border>
<table border=“value” cellpadding=“1”>default
<table border=“value” cellpadding=“value”>

<h2>COMPUTER COURSES</h2><br>
<table border=“2” cellpadding=“10”>
<tr><th>YEAR</th><th>COURSE</th></tr>
<tr><td>FIRST</td><td>Windows 98</td></tr>
<tr><td>SECOND</td><td>MS Word 98</td></tr>
<tr><td>THIRD</td><td>MS Excel</td></tr>
<tr><td>FOURTH</td><td>HTML</td></tr>

</table>
ADJUSTING CELL SPACE

• Cellspacing allows you to increase or decrease the amount of space between the cells of a table.
If the borders are visible, cellspacing controls the width of the internal borders.
• With cellspacing, you can further increase or decrease the width of the spaces.

<table border=“value” cellspacing=“value”>

<h2>COMPUTER COURSES</h2><br>
<table border=“2” cellpadding=“10” cellspacing=“10”>
<tr><th>YEAR</th><th>COURSE</th></tr>
<tr><td>FIRST</td><td>Windows 98</td></tr>
<tr><td>SECOND</td><td>MS Word 98</td></tr>
<tr><td>THIRD</td><td>MS Excel</td></tr>
<tr><td>FOURTH</td><td>HTML</td></tr>
</table>
WORKING WITH WIDTH

• Use the WIDTH attribute to determine the width of the table to be used.
• The width can be expressed either as an absolute value in pixels or as a percentage of the screen
width.
<html>
<head>
<title> Width </title>
</head>

<body bgcolor="pink">

<table border"3" bordercolor="red" width="100%">


<tr>
<th>COUNTRY</th>
<th>CURRENCY</th>
</tr>
<tr>
<td>JAPAN</td>
<td>YEN</td>
</tr>
<tr>
<td>PILIPINAS</td>
<td>PESO</td>
</tr>
</table>
</body>
</html>

Sample Output:
SETTING BGCOLOR

To use the BGCOLOR attribute, set the background color for a table row. Make sure that when you use
BGCOLOR it should not be the same color or shade with your font color.

<html>
<head>
<title> Sample Table </title>
</head>
<body bgcolor="salmon">

<table bgcolor="white" bordercolor="red" align="center"


border="1"
height="10" width="600">
<tr bgcolor="yellow">
<th> FIRST NAME </th>
<th> M.I. </th>
<th> SURNAME </th>
<th> SECTION </th>
<th> AGE </th>
<th> BIRTHDATE </th>
<th> ADDRESS </th>

</tr>
</table>
</body
</html>

Sample Output:
BORDER COLOR

Syntax: <bordercolor=“color”>

<table border=“1” cellpadding=“5”>


<tr bgcolor=“yellow”>
<td>QUANTITY</td>
<td>PRICE</td>
</tr>
<tr bordercolor=“red”>
<td>300</td>
<td>100</td>
</table

Nesting Tables

Just like lists, tables can be nested. Web page developers use this technique to enhance even more the
layout and structure.
<!doctype html>
<html>
<head>
<title> Home </title>
</head>

<body>
<table border="2" height="80%" width="100%">
<tr>
<td width="30%" valign="top">
<h3><align="center"> LINKS </h3>
<ul>
<li><a href="homepage.html"> Home </a>
<li><a href="personal profile-list.html">Personal Profile </a>
<li><a href="favorite song.html">Favorite Song </a>
<li><a href="photo gallery.html">Photo Gallery </a>
<li><a href="school.html">My School </a>
<li><a href="contacts.html">Contacts </a>
</ul>
</td>
<td>
<table align="center" border="3" bordercolor="red" width ="600" cellpadding ="4" cellspacing="6">
<caption> <h3> Directory</h3></caption>
<tr bgcolor="yellow">

<th> Name </th>


<th> Address </th>
<th> Mobile Number</th>
</tr>
<tr>
<td align="center" bgcolor="pink"> Jericho Rosales</td>
<td> Tandang Sora, Quezon City</td>
<td> +639261234567
</tr>
<tr>
<td align="center" bgcolor="pink"> EA Guzman</td>
<td> Novaliches, Quezon City</td>
<td> +639223456789
</tr>
<tr>
<td align="center" bgcolor="pink"> Kelvin Miranda</td>
<td> Bagumbong, Caloocan City</td>
<td> +639291234560
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Sample Output:

Adding Image to a Table

You can add image to a cell by using the tag pair <td> <img src=”image”>

<!doctype html>
<html>
<head>
<title> HOMEPAGE</title>
</head>
<body>

<hr/ color="black" height="50">


<center>
<table border="5">
<tr height= "70" width="250">
<td> <img src="family icon.png" height="70" width="80"> </td>
<td><img src="aboutme.jpg"height="70" width="80"> </td>
<td><img src="mymusic.jpg "height="70" width="80"></td>
<td><img src="photo gallery icon.png" height="70" width="80"></td>
<td><img src="myschool.jpg" height="70" width="80"></td>
<td><img src="contacts icon.jpg" height="70" width="80"></td>
</tr>
</table>
</body>
</html>
Sample Output:

Applying Hyperlink to a Table.

You can apply hyperlink to a cell by using the tag pair <td><a> <img src=”image”>

<!doctype html>
<html>
<head>
<title> HOMEPAGE</title>
</head>
<body bgcolor="pink">

<hr/ color="black" height="80">


<center>
<table border="5">
<tr height= "70" width="250">
<td><a href="Talisay family.html"> <img src="family icon.png" height="70" width="80"> </a></td>
<td><a href="personal profile-list.html"><img src="aboutme.jpg"height="70" width="80"> </a></td>
<td><a href="favorite song.html"><img src="mymusic.jpg "height="70" width="80"></a></td>
<td><a href="photo gallery.html"><img src="photo gallery icon.png" height="70" width="80"></a></td>
<td><a href="school.html"><img src="myschool.jpg" height="70" width="80"></a></td>
<td><a href="contacts.html"><img src="contacts icon.jpg" height="70" width="80"></a></td>

</tr>
</table>

</body>
</html>

Sample output:

You might also like