Tables are commonly used to display all manner of data, such as timetables, financial reports, and...

Tables

Tables are commonly used to display all manner of data, such as timetables, financial reports, and sports results etc.

Tables, just like spreadsheets, are made up of rows and columns.

Each rectangle is known as a cell. A row is made up of a set of cells on the same line from left to right, while a column is made up of a line of cells going from top to bottom.

Introduction

<table> element- Creates a table. 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. And each cell is then written inside the row element

using a <td> element — which stands for table data. <th> element- used to add header

Key point:Each cell must be represented by either a <td> or a <th> element in order for the table to display correctly even if that element is empty.

Table in HTML

<table border=“1”><tr><td>BSCS</td><td>24 Students</td></tr><tr><td>MCS</td><td>18 Students</td></tr></table>

Simple Example

Table Tags

Border Bordercolor Width Align Bgcolor Cellpadding (used to create a gap between the edges of

a cell and its contents) Cellspacing (used to create a space between the

borders of each cell) Dir (supposed to indicate the direction of text that is

used in the table. Possible values are ltr for left to right text and rtl for right to left for languages such as Hebrew and Arabic)

<table> Attributes

Rules(used to indicate which inner borders of the table should be displayed, such as rows and columns.)

<table> Attributes

Splitting a table into three sections: a head, body, and foot

Captioning tables Using the rowspan and colspan attributes to

make cells stretch over more than one row or column

Grouping columns using the <colgroup> element

Sharing attributes between unrelated columns using the <col> element

Advanced Tables

Tables can be divided into three portions: a header, a body, and a foot.

❑ <thead> to create a separate table header❑ <tbody> to indicate the main body of the table❑ <tfoot> to create a separate table footer

The head and foot are rather similar to headers and footers in a word-processed document, which remain the same for every page, while the body is the main content of the table.

Splitting Up Tables Using a Head, Body, and Foot

<Caption> </Caption>

Gives the Caption to the table

Use the <caption> element after the opening <table> tag and before the first row or header

Captioning Tables

The colspan attribute allows a cell to stretch across more than one column.

The rowpsan attribute does much the same thing as the colspan attribute, but it works in the opposite direction; it allows cells to stretch vertically across cells.

Using the rowspan and colspan attributes

<html><head></head><table border="1"><Caption> Table Practices </Caption><thead><tr><td colspan="2">This is the Advanced table header </td></tr></thead><tfoot><tr><td colspan="2"> This is the Advanced table footer </td></tr></tfoot>

<tbody><tr><td>BSCS</td><td>24 Students</td></tr><tr><td>MCS</td><td>18 Students</td></tr></table></tbody></html>

Simple Example after Splitting

you can group one or more adjacent columns together using the <colgroup> element. It is particularly helpful when two or more adjacent columns contain similar types of information.

This allows you to apply formatting to the group of columns rather than having to style each column separately.

Grouping Columns Using the <colgroup> Element

<HTML><head></head><body><table border="1"><colgroup span="8" width="75" class="mainColumns" /><colgroup span="2" width="50" class="subTotalColumns" /><colgroup span="2" width="80" class="totalColumns" /><tr><td>Test1</td><td>Test2</td><td>Test3</td><td>Test4</td>

<td>Test5</td><td>Test6</td><td>Test7</td><td>Test8</td><td>Test9</td><td>Test10</td><td>Test11</td><td>Test12</td></tr></table></body></HTML>

Example

The <col> element can be used to perform a similar role as the <colgroup> element, but without actually implying a structural group of columns. It can also be used to indicate that just one column needs formatting different from the rest of the group.

The <col> elements are always empty elements, and are therefore used only to carry attributes, not content.

Columns Sharing Styles Using the <col> Element

Example<HTML><head></head><body><table border="1"><colgroup span="10"><col span="9" width="100" id="mainColumns" /><col span="1" width="200" id="totalColumn" /></colgroup><tr><td>Test1</td><td>Test2</td><td>Test3</td><td>Test4</td><td>Test5</td><td>Test6</td><td>Test7</td><td>Test8</td><td>Test9</td><td>Test10</td></tr></table></body></HTML>

Tables are commonly used to display all manner of data, such as timetables, financial reports, and...

Documents

Transcript of Tables are commonly used to display all manner of data, such as timetables, financial reports, and...