Scribd
Upload
22 views4 pages

How To Create A Table: Table Rows Table Data Table Headings

The document describes how to create tables in HTML using various tags such as <table>, <tr>, <td>, and <th>. It provides examples of how to structure a basic table, add borders, make cells span multiple columns or rows, and add a caption. The document also discusses CSS properties that can be used to style tables, such as adding borders, cell padding, and aligning text.

Uploaded by

Jason Villa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
22 views4 pages

How To Create A Table: Table Rows Table Data Table Headings

The document describes how to create tables in HTML using various tags such as <table>, <tr>, <td>, and <th>. It provides examples of how to structure a basic table, add borders, make cells span multiple columns or rows, and add a caption. The document also discusses CSS properties that can be used to style tables, such as adding borders, cell padding, and aligning text.

Uploaded by

Jason Villa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Activity 3

How to create a Table


Tables are defined with the <table> tag.
Tables are divided into table rows with the <tr> tag.
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.
To add a caption to a table, use the <caption> tag:

Try the following examples in Notepad


Sample Code of Table
<html>
<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>
</table>
</html>
An HTML Table with a Border Attribute

Sample Code
<html>
<table border="1" 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>
</table>
</html>

HTML Table Headings and Table Cells that Span Many Columns
To make a cell span more than one column, use the colspan attribute:
Sample Code
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
Table Cells that Span Many Rows
To make a cell span more than one row, use the rowspan attribute:
Sample Code
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
An HTML Table With a Caption
Sample Code
<table border =3 style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>

</tr>
</table>
CSS Properties :
Use the CSS border property to define a border
Use the CSS border-collapse property to collapse cell borders
Use the CSS padding property to add padding to cells
Use the CSS text-align property to align cell text
Use the CSS border-spacing property to set the spacing between cells
Use the colspan attribute to make a cell span many columns
Use the rowspan attribute to make a cell span many rows
Use the id attribute to uniquely define one table
To add borders, use the CSS border property:
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</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>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>

An HTML Table with Cell Padding


<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
</style>
</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>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<p>Try to change the padding to 5px.</p>
</body>
</html>

To left-align the table headings, use the CSS text-align property:


Sample Code:
th {
text-align: left;
}
Add borders and tables to your webpage.

You might also like