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.
A D V E R T I S E M E N T
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
Be the first one to comment on this page.
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 Quizzes
XML Quizzes
Browser Scripting Quizzes
Server Scripting Quizzes
.NET (dotnet) Quizzes
Multimedia Quizzes
Web Building Quizzes
Java Quizzes
Programming Langauges Quizzes
Soft Skills Quizzes
Database Quizzes
Operating System Quizzes
Software Testing Quizzes
SAP Module Quizzes
Networking Programming Quizzes
Microsoft Office Quizzes
Accounting Quizzes