|
Okay. So you have some data the needs to be put in tabulated form or may be special arrangement is desired to display the information. Tables are the solution. You can arrange you data in multiple rows and columns, have them bordered by a particular color or even make the border invisible. There are lots of ways to use tables, lets get in.
Tables are used to display data in a tabular format on the screen. Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.
Consider the code below :
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
The output in the browser looks like this:
| row 1, cell 1 | row 1, cell 2 | | row 2, cell 1 | row 2, cell 2 |
BORDER
BORDER attribute draws a border around the table. If you do not specify a border attribute the table will be displayed without any borders.
Consider the code below :
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
Headings in a Table
Headings in a table are defined with the <th> tag.
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
The output in the browser looks like this:
| Heading | Another Heading | | row 1, cell 1 | row 1, cell 2 | | row 2, cell 1 | row 2, cell 2 |
Table cells with no content are not displayed very well in most browsers.
There can be problem with the border around the empty cell. To avoid this, add a non-breaking space ( ) to empty data cells, to make the borders visible:
Consider the code below :
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td> </td>
</tr>
</table>
The output in the browser looks like this:
| row 1, cell 1 | row 1, cell 2 | | row 2, cell 1 | |
Table Tags
| Tag | Description | <table>
<th>
<tr>
<td>
<caption>
<colgroup>
<col>
<thead>
<tbody>
<tfoot> | Defines a table
Defines a table header
Defines a table row
Defines a table cell
Defines a table caption
Defines groups of table columns
Defines the attribute values for one or more columns in a table
Defines a table head
Defines a table body
Defines a table footer |
|
