Scribd
Upload
14 views

2nd Meeting MIDTERMIntroduction To HTML Programming

The document provides information about HTML table tags and attributes. It defines common table tags like <table>, <tr>, <td>, and <th> and explains what they are used for. It also lists various table attributes that control things like borders, padding, alignment, colors, and more. The document concludes with sample HTML code that demonstrates how to build a table with these tags and attributes.

Uploaded by

John Nathan Francisco
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
14 views

2nd Meeting MIDTERMIntroduction To HTML Programming

The document provides information about HTML table tags and attributes. It defines common table tags like <table>, <tr>, <td>, and <th> and explains what they are used for. It also lists various table attributes that control things like borders, padding, alignment, colors, and more. The document concludes with sample HTML code that demonstrates how to build a table with these tags and attributes.

Uploaded by

John Nathan Francisco
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

INFORMATION SHEET 6

<TABLE>

<Table> </Table>- Specifies a container for a table


within your document.
- All other tags will be inserted
within these tags.
<tr> </tr> - Table Row
- Rows consist of heading or data
cells.
<th> </th> - Table Heading
- Heading cells default to bold text
and center alignment
<td> </td> - Table Data
- Data cells default to normal text
and left align.

Colspan - Column Span


<td colspan=”3”>, <thcolspan=”3”> - Specifies how many columns you combine.
Rowspan- Row Span
<td rowspan=”3”>, <throwspan=”3”>- Specifies how many rows you combine.

Collapsed Borders
If you want the borders to collapse into one border, add the CSS border-collapse property:

<ATTRIBUTES OF TABLE>

Align - Positions the flush left, right, or in the center of the window.
<table align=”center”>

Background - Specifies the relative or absolute location of the graphic image file loaded as a
<table background=”URL”> background image for the entire table.

BGCOLOR - Specifies the background color within all table cells in the table.
<table bgcolor=”red”>

BORDER - Specifies the thickness of borderaroundthe table cells. Use a value 0 to produce
<table border=”3”> a table with no visible borders.

BORDERCOLOR - Specifies the color of the borders of all the table cells in the table.
<table border=”3” bordercolor=”red”>

BORDERCOLORDARK - Specifies the darker color used to draw 3-D borders around the table cells.
<table border=”3” bordercolordark=”black”>

BORDERCOLORLIGHT -Specifies the lighter color used to draw 3-D borders around the table cells.
<table border=”3” bordercolorlight=”gray”>

CELLPADDING - Specifies the space (in pixels) between the edges of table cells and their content.
<table border=”3” cellpadding=”10”>
CELLSPACING -Specifies the space (in pixels) between the borders of table cells and the borders of <table
border=”3” cellspacing=”10”> adjacent cells

WIDTH - Specifies the width of the table. You can set value to an absolute number of pixels or to <table
width=”35%” align=”center”> percentage amount so that the table is proportionally as wide as the available
space.

VALUES FOR THE FRAME ATTRIBUTES VALUES FOR THE RULES ATTRIBUTES

FRAME EFFECTS RULES EFFECT


VALUE VALUE
Frame=”above” The top side Rules=”none” No cell borders; this is the default
Frame=”below” The bottom side value.
Frame=”border” All four sides the same as Rules=”groups” Cell borders will appear between
specifying the border attribute. rows group and column group only.
Frame=”box” Same as the frame border. Rules=”rows” Rules will appear between rows
Frame=”hsides” The top and bottom sides only.
(“horizontal rule”). Rules=”cols” Rules will appear between columns
Frame=”lhs” The left-hand side. only
Frame=”rhs” The right-hand side. Rules=”all” Rules will appear between all rows
Frame=”void” No sides rendered. (the default and columns (same as specifying the
value). border attribute).
Frame=’’vsides” The left and right sides (“vertical
sides”).

SAMPLE PROGRAM:
<html>
<head>
<title>Table</title>
</head>
<body>
<table align="center" width="50" border="15" cellpadding="3" cellpspacing="10">
<tr>
<td rowspan="3"><font color=”gray”>
<center>
A<br>R<br>N<br>I<br>E</td>
<td>ARNIE</td>
</tr><tr>
<td>GREEN</td>
<td>YELLOW</td>
<td>PINK</td>
<td>ORANGE</td>
</tr>
<tr>
<td colspan="2">APPLE</td>
<td>BANANA</td>
<td>CHICO</td>
<td>DUHAT</td>
<tr>
</table>
</body>
</html>

Sample program with collapse border


<html> <tr>
<head> <td>Khaizer John Albarico</td>
<style> <td>CAC</td>
table, th, td { <td>Morning</td>
border: 1px solid black; </tr>
border-collapse: collapse; <tr>
} <td>Xian Deuna</td>
</style> <td>ACS</td>
</head> <td>Afternoon</td>
<body> </tr>
h2>Collapsed Borders</h2> <tr>
<p>If you want the borders to collapse into one <td>Jetmark Terante</td>
border</p> <td>ACE</td>
<table style="width:50%"> <td>Evening</td>
<tr> </tr>
<th>Student Name</th> </table>
<th>Course Code</th>
<th>Session</th> </body>
</tr> </html>

You might also like