HTML Tables
HTML HTML Tables Table Spacing
Basic Html Table
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.
Example
<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.
Output
| Name | Class | Roll No |
|---|---|---|
| Ali | 5th | 01 |
| Ahmed | 6th | 05 |
| John | 8th | 10 |
Table Cell Padding
It specify space between table border and table content.
Example:-
<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.
Output:-
| Name | Class | Roll No |
|---|---|---|
| Ali | 5th | 01 |
Table Cell Spacing
It specify white space between table cells.
Example:-
<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.
Image to Clarify Cell-padding and Cell-spacing Concept:-
Html Border Collapsed
You can collapsed borders into one border.
Example:-
<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>
Output:----
| Name | Class | Roll No |
|---|---|---|
| Ali | 5th | 01 |
Spanning Table Rows
Spanning rows allows you to extend row into multiple rows.
Example:-
<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>
Output:-
| Name | Class | Roll No |
|---|---|---|
| Ali | 5th | 01 |
| Ahmed | 03 | |
| John | 05 |
Spanning Table Columns
Spanning columns allows you to extend columns into multiple columns.
Example:-
<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>
Output:-
| Name | Class /section | Roll No | |
|---|---|---|---|
| Ali | 5th | A | 01 |
| Ahmed | 5th | B | 03 |
| John | 8th | A | 05 |