Scribd
Upload
229 views

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
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
229 views

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
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