tables are commonly used to display all manner of data, such as timetables, financial reports, and...
TRANSCRIPT
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>