HTML Tables

Tables allow you to display data in form of grids and cells.

Tables Basic.

1. A Table consists of a grid of Rows and Columns, intersection of which is called a cell. Each cell is a distinct region which
can contain text, graphics and sometime even another table.

2. The most fundamental and basic elements of all tables are <table> , <tr> , <td> .

Basic table elements.

Element

Description

<table>

This element defines the table.

<tr>

This element defines the table rows.

<td>

This element defines the table cells.td stands for table data.

Your First html table.

∗ The <table> tag creates an HTML table . Within it, you include one or more <tr>
tags, which define the table rows, and within each <tr> tag, you define one or more
<td> tags, which define the table cells .

Example:Structure of a basic table.

Give it a TRY! » NOTE-The border is used to draw boundries of the table.It indicates the width of border in pixels.It has been deprecated

Spanning Columns .

1.Another important element is the table header <th>,this represents the heading of a row or a column just to
differentiate between data and their Descriptions.

Example of a Table with Headers.

Give it a TRY! » NOTE- Most browsers display the <th> element contents in the bold and in center of the cell

Column Spanning.

1.In some situations you may need to stretch an entry beyond on cell, in that case you can expand a column.

2.This is done by using the colspan attribute on <th> or <td> elements of the table .

Example:A table using Colspan.

Give it a TRY! » NOTE-The colspan attribute value indicates the no of columns the cell should run across.

Row Spanning .

1.To stretch an entry downwards across more than a single row use the rowspan attribute on any of the <th> or <td> elements .

Example:A Table with a Row Span.

Give it a TRY! » NOTE-The rowspan attribute value indicates the no of rows the cell should run downwards.