Scribd
Upload
288 views11 pages

Chapter 7-HTML Tables

The document discusses HTML tables. It explains that the <table> element creates a table and contains rows (<tr> element) and cells (<td> and <th> elements). It describes how to use colspan and rowspan attributes to make cells span multiple columns or rows. The document also covers adding a caption (<caption> element) and nesting one table inside a cell of another table.

Uploaded by

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

Chapter 7-HTML Tables

The document discusses HTML tables. It explains that the <table> element creates a table and contains rows (<tr> element) and cells (<td> and <th> elements). It describes how to use colspan and rowspan attributes to make cells span multiple columns or rows. The document also covers adding a caption (<caption> element) and nesting one table inside a cell of another table.

Uploaded by

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

HTML Tables

HTML TABLES
At the end of this module, the students will be able to
understand:

 What are tables and how are they used


in HTML
 Basic Table elements and Attributes
 Colspan and Rowspan
 Table Caption
 Nested Table
The <table> element.

Inside the <table> element, the table is written out row by


row.

A row is contained inside a <tr> element which stands for


table row.

Each cell is then written inside the row element using a


<td>element, which stands for table data.

When writing code for a table in a text editor, you should start
each row and cell on a new line and indent table cells inside
table rows.
<table>
<!- - First Row - ->
<tr>
<td>row1, column 1</td>
<td>row1, column 2</td>
</tr>
<!- - Second Row - ->
<tr>
<td>row2, column 1</td>
<td>row2, column 2</td>
</tr>
</table>
The <th> element in place of the <td>element for the cells
that contain a heading.

By default, most browsers render the content of a <th>


element in bold text.
<table>
<!- - First Row - ->
<tr>
<th>Name</th>
<th>Address</th>
</tr>
<!- - Second Row - ->
<tr>
<td>Ahmed</td>
<td>Sohar</td>
</tr>
</table>
The <table> Element Creates a Table

The <table>element is the containing element for all tables.

The <tr>Element Contains Table Rows

The <tr> element contains each row in a table. Anything


appearing within a element should appear on the same row.

The <td>and <th>Elements Represent Table Cells

Every cell in a table is represented by either a <td>element for


cells containing table data or a <th>element for cells
containing table headings.
All tables follow this basic structure; although additional
elements and attributes enable you to control the
presentation of tables.

The colspan Attribute

Use the colspan attribute when a cell should span across


more than one column.

The value of the attribute specifies how many columns


of the table a cell spans across.

colspan="2"
The rowspan Attribute

The rowspan attribute specifies the number of rows of the


table a cell spans across, the value of the attribute being the
number of rows the cell stretches across.

rowspan="2"

The <td>and <th>elements can both carry the same set of


attributes, and the attribute applies only to that one cell
carrying it.
Adding a Caption to a Table

The <caption>element appears directly after the opening


tag; it should come before the first row:

<table>
<caption>Student Details</caption>
<tr>
NESTED TABLE
A table inside a table cell.
Reference

Proquest

You might also like