HTML Tables


HTML HTML Tables Table Column

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:-

padding

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
HTML Table Column Chapter Next »