HTML Tables

The HTML table allows to arrange data like, text, images, links, forms, form fields, other tables, etc. into rows and columns of cells.

Creating HTML Tables

Tables in HTML are defined with the <table> tag.

A table is divided into rows with the <tr> tag, which stands for table row, and each row is divided into data cells with the <td> tag, which stands for table data.

A <td> tag can contain text, links, images, lists, forms, other tables, etc.

  • <table border="1">
  •     <thead>
  •         <tr>
  •             <th>No.</th>
  •             <th>Name</th>
  •             <th>Email</th>
  •         </tr>
  •     </thead>
  •     <tbody>
  •         <tr>
  •             <td>1</td>
  •             <td>John Carter</td>
  •             <td>johncarter@mail.com</td>
  •         </tr>
  •         <tr>
  •             <td>2</td>
  •             <td>Peter Parker</td>
  •             <td>peterparker@mail.com</td>
  •         </tr>
  •         <tr>
  •             <td>3</td>
  •             <td>John Rambo</td>
  •             <td>johnrambo@mail.com</td>
  •         </tr>
  •     </tbody>
  • </table>
 

Note:Browsers built-in style sheets will display the text in the <th> element as bold and centered. But, you can override browser's default style sheet using CSS.


Table Cellpadding and Cellspacing

The cellpadding and cellspacing attributes are used to adjust white space inside a table.

  • cellpadding adjust the white space between table cell border and its content.
  • cellspacing adjust the white space between table cells.
  • <table border="1" cellpadding="10" cellspacing="5">
  •     <thead>
  •         <tr>
  •             <th>No.</th>
  •             <th>Name</th>
  •             <th>Email</th>
  •         </tr>
  •     </thead>
  •     <tbody>
  •         <tr>
  •             <td>1</td>
  •             <td>John Carter</td>
  •             <td>johncarter@mail.com</td>
  •         </tr>
  •         <tr>
  •             <td>2</td>
  •             <td>Peter Parker</td>
  •             <td>peterparker@mail.com</td>
  •         </tr>
  •         <tr>
  •             <td>3</td>
  •             <td>John Rambo</td>
  •             <td>johnrambo@mail.com</td>
  •         </tr>
  •     </tbody>
  • </table>

Spanning Multiple Rows and Cells

Spanning allow you to extend columns and rows across multiple other columns and rows.

Normally, when we creating a table cell, it cannot pass over into the space below or above another table cell. But, you can use the colspan attribute to span multiple columns and rowspan attribute to span multiple rows in a table. Here's is an example:

  • <table border="1">
  •     <tr>
  •         <th rowspan="4">Users Info</th>
  •     </tr>
  •     <tr>
  •         <td>1</td>
  •         <td>John Carter</td>
  •         <td>johncarter@mail.com</td>
  •     </tr>
  •     <tr>
  •         <td>2</td>
  •         <td>Peter Parker</td>
  •         <td>peterparker@mail.com</td>
  •     </tr>
  •     <tr>
  •         <td>3</td>
  •         <td>John Rambo</td>
  •         <td>johnrambo@mail.com</td>
  •     </tr>
  • </table>
 
Close

Your Feedback:

 

We would love to hear from you! Please say something.