What are tables used for?
Web designers use tables for multiple purposes - positioning images and text on webpages (page layout),
displaying large arrays of data, creating rectangular boxes on the webpage, creating input forms, etc.
To create a table we need three tags as follows:
Example of Tables:
displaying large arrays of data, creating rectangular boxes on the webpage, creating input forms, etc.
To create a table we need three tags as follows:
<table> | The main tag. Used to tell the browser "this is a table", along with some attributes like size, border width and a few other things. |
<tr> | Table Row defines a horizontal row of <td> (Table Data) cells |
<td> | Specifies an individual block or cell in a table row. |
Open Text Editor and type.
<table>
<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>
<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>
Save the file as table.html
Open file in browser(internet explorer, firefox )
Output
Output
row 1, cell 1 | row 1, cell 2 |
row 2, cell 1 | row 2, cell 2 |
Border in Tables
To create a table we use border element with <table> tag.
<table border = "1">
<table border = "1">
Open Text Editor and type.
<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>
<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>
Save the file as tableborder.html
Open file in browser(internet explorer, firefox )
Output
Output
row 1, cell 1 | row 1, cell 2 |
row 2, cell 1 | row 2, cell 2 |
Table Header
We use headings in tables to highlight the row containts.
Use <th> or defining table header. For example
Use <th> or defining table header. For example
Save the file as Ordered.html
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</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>
<tr>
<th>Header 1</th>
<th>Header 2</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>
Save the file as Ordered.html
Open file in browser(internet explorer, firefox )
Output
Header 1 | Header 2 |
---|---|
row 1, cell 1 | row 1, cell 2 |
row 2, cell 1 | row 2, cell 2 |
powered by multimediagyan ©
No comments:
Post a Comment