The tag <table> defines html table. Every table is divided into rows(<tr> Tag). Every row is divided into table data (<td> Tag). Table Header is defined by <th> Tag.
<table border="1">
<tr>
<th>Name</th>
<th>Class</th>
<th>Roll No</th>
</tr>
<tr>
<td>Ali</td>
<td>5th</td>
<td>01</td>
</tr>
<tr>
<td>Ahmed</td>
<td>6th</td>
<td>05</td>
</tr>
<tr>
<td>John</td>
<td>8th</td>
<td>10</td>
</tr>
</table>
Note:By Default Table heading is bold and centered.
Name | Class | Roll No |
---|---|---|
Ali | 5th | 01 |
Ahmed | 6th | 05 |
John | 8th | 10 |
It specify space between table border and table content.
<table border="1" cellpadding="10">
<tr>
<th>Name</th>
<th>Class</th>
<th>Roll No</th>
</tr>
<tr>
<td>Ali</td>
<td>5th</td>
<td>01</td>
</tr>
</table>
Note:If you can't specify padding content will displayed without padding.
Name | Class | Roll No |
---|---|---|
Ali | 5th | 01 |
It specify white space between table cells.
<table border="1" cellspacing="10">
<tr>
<th>Name</th>
<th>Class</th>
<th>Roll No</th>
</tr>
<tr>
<td>Ali</td>
<td>5th</td>
<td>01</td>
</tr>
</table>
Note:If you can't specify padding content will displayed without padding.
You can collapsed borders into one border.
<table border="1" border-collapse="collapse" cellpadding="10" cellspacing="5" >
<tr>
<th>Name</th>
<th>Class</th>
<th>Roll No</th>
</tr>
<tr>
<td>Ali</td>
<td>5th</td>
<td>01</td>
</tr>
</table>
Name | Class | Roll No |
---|---|---|
Ali | 5th | 01 |
Spanning rows allows you to extend row into multiple rows.
<table border="1">
<tr>
<th>Name</th>
<th>Class</th>
<th>Roll No</th>
</tr>
<tr>
<td>Ali</td>
<td rowspan="3">5th</td>
<td>01</td>
</tr><tr>
<td >Ahmed</td>
<td>03</td>
</tr>
<tr>
<td >John</td>
<td>05</td>
</tr>
</table>
Name | Class | Roll No |
---|---|---|
Ali | 5th | 01 |
Ahmed | 03 | |
John | 05 |
Spanning columns allows you to extend columns into multiple columns.
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Class /section</th>
<th>Roll No</th>
</tr>
<tr>
<td>Ali</td>
<td>5th</td>
<td>A</td>
<td>01</td>
</tr><tr>
<td >Ahmed</td>
<td>5th</td>
<td>B</td>
<td>03</td>
</tr>
<tr>
<td >John</td>
<td>8th</td>
<td>A</td>
<td>05</td>
</tr>
</table>
Name | Class /section | Roll No | |
---|---|---|---|
Ali | 5th | A | 01 |
Ahmed | 5th | B | 03 |
John | 8th | A | 05 |