| HTML Tutorials |
|
|
| XML Tutorials |
|
|
| Browser Scripting |
|
|
| Server Scripting |
|
|
| .NET (dotnet) |
|
|
| Multimedia |
|
|
| Web Building |
|
|
| Java Tutorials |
|
|
| Programming Langauges |
|
|
| Soft Skills |
|
|
|
- The HTML table model allows authors to arrange data -- text, preformatted text, images, links,
forms, form fields, other tables, etc. -- into rows and columns of cells.
|
|
Tables
|
- 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.
|
<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 2p</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 2p</td>
</tr>
</table>
|
|
|
Tables and the Border Attribute
|
|
The table will be displayed without any borders if you do not specify a border attribute .
Sometimes this can be useful, but most of the time, you want to show the borders.
|
|
To display a table with borders, you will have to use the border attribute:
|
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
</table>
|
|
|
Spanning Multiple Rows and Cells
|
|
Use rowspan to span multiple rows & colspan to span multiple columns.
|
|
To display a table with borders, you will have to use the border attribute:
|
<table border="1">
<tr>
<td>column1</td>
<td>column2</td>
<td>column3</td>
</tr>
<tr>
<td rowspan="2">row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
</tr>
<tr>
<td>row 2, cell 2</td>
<td>row 2, cell 3</td>
</tr>
<tr>
<td colspan="3">row 3, cell 1</td>
</tr>
</table>
|
|
|
O/P:
|
| column1 |
column2 |
column3 |
| row 1, cell 1 |
row 1, cell 2 |
row 1, cell 3 |
| row 2, cell 2 |
row 2, cell 3 |
| row 3, cell 1 |
|
|
|
Cell Padding and Spacing
|
|
You will be able to adjust the white space on your tables with the cellpadding and cellspacing attributes .
|
|
Padding represents the distance between cell borders and the content within, while
spacing defines the width of the border.
|
<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>
|
|
|
O/P: Table without Cell Padding and Spacing
|
| row 1, cell 1 |
row 1, cell 2 |
| row 2, cell 1 |
row 2, cell 2 |
|
|
<table border="1" cellspacing="10">
<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>
|
|
|
O/P: Table with Cellspacing
|
| row 1, cell 1 |
row 1, cell 2 |
| row 2, cell 1 |
row 2, cell 2 |
|
|
<table border="1" cellpadding="10">
<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>
|
|
|
O/P: Table with Cellpadding
|
| row 1, cell 1 |
row 1, cell 2 |
| row 2, cell 1 |
row 2, cell 2 |
|
|
Share And Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages.
Keywords:creating html tables, html font color code tables, html help tables,
advanced html tables, html tutorial tables
|
|
| HTML Quizes |
|
|
| XML Quizes |
|
|
| Browser Scripting Quizes |
|
|
| Server Scripting Quizes |
|
|
| .NET (dotnet) Quizes |
|
|
| Multimedia Quizes |
|
|
| Web Building Quizes |
|
|
| Java Quizes |
|
|
| Programming Langauges Quizes |
|
|
| Soft Skills Quizes |
|
|
|
