r
Learn one of the most powerful programming languages in the world and become a rockstar developer.
HTML table allows you to arrange data into rows and columns. They are commonly used to display tabular data like product listings, customer's details, financial reports, and so on.
You can create a table using the <table>
element. Inside the <table>
element, you can use the <tr>
elements to create rows, and to create columns inside a row you can use the <td>
elements. You can also define a cell as a header for a group of table cells using the <th>
element.
<table> <tr> <th>No.</th> <th>Name</th> <th>Age</th> </tr> <tr> <td>1</td> <td>Peter Parker</td> <td>16</td> </tr> <tr> <td>2</td> <td>Clark Kent</td> <td>34</td> </tr> </table>
Tables do not have any borders by default. You can use the CSS border
property to add borders to the tables. Also, table cells are sized just large enough to fit the contents by default. To add more space around the content in the table cells you can use the CSS padding
property.
The following style rules add a 1-pixel border to the table and 10-pixels of padding to its cells.
table, th, td { border: 1px solid black; } th, td { padding: 10px; }
By default, borders around the table and their cells are separated from each other. But you can collapse them into one by using the border-collapse
property on the <table>
element.
Also, text inside the <th>
elements are displayed in bold font, aligned horizontally center in the cell by default. To change the default alignment you can use the CSS text-align
property.
The following style rules collapse the table borders and align the table header text to left.
table { border-collapse: collapse; } th { text-align: left; }
Please, check out the tutorial on CSS tables
to learn about styling HTML tables in details.
Tips: Most of the<table>
element's attribute such asborder
,cellpadding
,cellspacing
,width
,align
, etc. for styling table appearances in earlier versions has been dropped in HTML5, so avoid using them. Use CSS tostyle HTML tables
instead.
To make a cell span more than one column, use the colspan
attribute:
<table> <tr> <th>Name</th> <th colspan="2">Phone</th> </tr> <tr> <td>Suresh Chand</td> <td>123456789</td> <td>123456789</td> </tr> </table>
To make a cell span more than one row, use the rowspan
attribute:
<table> <tr> <th>Name</th> <td>Suresh chand</td> </tr> <tr> <th rowspan="2">Phone:</th> <td>123456789</td> </tr> <tr> <td>123456789</td> </tr> </table>
To add a caption to a table, use the <caption>
tag:
<table> <caption>Users Info</caption> <tr> <th>No.</th> <th>Name</th> <th>Age</th> </tr> <tr> <td>1</td> <td>Peter Parker</td> <td>16</td> </tr> <tr> <td>2</td> <td>Clark Kent</td> <td>34</td> </tr> </table>
<table>
element to define a table<tr>
element to define a table row<td>
element to define a table data<th>
element to define a table heading<caption>
element to define a table captionborder
property to define a borderborder-collapse
property to collapse cell borderspadding
property to add padding to cellstext-align
property to align cell textborder-spacing
property to set the spacing between cellscolspan
attribute to make a cell span many columnsrowspan
attribute to make a cell span many rowsid
attribute to uniquely define one table