r HTML Tables | Complete HTML tutorials | Adzetech.com
ABOUT
CONTACT
CONTACT@ADZETECH.COM

LERAN HTML COMPLETE

Learn one of the most powerful programming languages in the world and become a rockstar developer.

HTML Tables

Creating Tables in HTML

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.

Example

Try this code »
<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.

Example

Try this code »
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.

Example

Try this code »
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 as border, cellpadding, cellspacing, width, align, etc. for styling table appearances in earlier versions has been dropped in HTML5, so avoid using them. Use CSS to style HTML tables instead.

HTML Table - Cells that Span Many Columns

To make a cell span more than one column, use the colspan attribute:

Example

Try this code »
<table>
	<tr>
		<th>Name</th>
		<th colspan="2">Phone</th>
	</tr>
	<tr>
		<td>Suresh Chand</td>
		<td>123456789</td>
		<td>123456789</td>
	</tr>
</table>

HTML Table - Cells that Span Many Rows

To make a cell span more than one row, use the rowspan attribute:

Example

Try this code »
<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>

HTML Table - Adding a Caption

To add a caption to a table, use the <caption> tag:

Example

Try this code »
<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>

Short Information

  • Use the HTML <table> element to define a table
  • Use the HTML <tr> element to define a table row
  • Use the HTML <td> element to define a table data
  • Use the HTML <th> element to define a table heading
  • Use the HTML <caption> element to define a table caption
  • Use the CSS border property to define a border
  • Use the CSS border-collapse property to collapse cell borders
  • Use the CSS padding property to add padding to cells
  • Use the CSS text-align property to align cell text
  • Use the CSS border-spacing property to set the spacing between cells
  • Use the colspan attribute to make a cell span many columns
  • Use the rowspan attribute to make a cell span many rows
  • Use the id attribute to uniquely define one table
Click on the "Try it Yourself" button to see how it works.
Previous Next
x
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Privacy Policy That's Fine