Home 〉 HTML Tutorials 〉 HTML Table Tag Tutorial with Examples | HTML th, td, tr, colspan, rowspan Explained

HTML Table Tag Tutorial with Examples | HTML th, td, tr, colspan, rowspan Explained !

HTML Table Tag Tutorial with Examples | HTML th, td, tr, colspan, rowspan Explained !

Please Note :
  • This Tutorial is still not Completed.
  • We will be Completing it soon.

Want to display tabular data in your web pages? This complete guide on the HTML table tag helps you understand how to structure data using '<table>', '<th>', '<td>', and other . With examples, syntax breakdown, and styling tips, you'll learn how to create clean, responsive tables. From 'colspan' and 'rowspan' to 'thead', 'tbody', and 'tfoot', every element is explained in detail. This detailed blog post on HTML table tag is as follows.

Introduction

In HTML, the '<table>' tag is used to display data in a structured, tabular form — like a spreadsheet. Tables are extremely useful for organizing content and presenting information in rows and columns. Understanding HTML tables is crucial for web development as it lays the foundation for displaying and formatting data effectively.

Syntax of HTML Table Tag

Syntax ✍

<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</table>

  • '<table>': The container for the entire table (block-level element).
  • '<tr>': Table row (block-level element).
  • '<th>': Table header cell (inline-level element, bold by default).
  • '<td>': Table data cell (inline-level element, normal text).

Attributes of the HTML '<table>' Tag

Common Attributes of the HTML '<table>' Tag

Attribute

Description

View Demo

border

Sets the thickness of the table border. Example: border="1" adds a thin border.

View Demo

cellpadding

Adds space inside each cell (between text and cell edge).

View Demo

cellspacing

Adds space between the cells in the table.

View Demo

width

Sets the width of the whole table. Can use % or px.

View Demo

height

Sets the height of the whole table. Not commonly used in modern HTML.

View Demo

align

Aligns the whole table to the left, center, or right. Example: align="center".

View Demo

bgcolor

Sets the background color of the table. Example: bgcolor="yellow".

View Demo

background

Sets the background image of the table.

View Demo

summary

(Deprecated) Used for screen readers to describe what the table is about.

View Demo

frame

Specifies which outer borders to show. Values: void, above, below, hsides, vsides, lhs, rhs, box, border.

View Demo

rules

Controls the lines between rows and columns. Values: none, groups, rows, cols, all.

View Demo

bordercolor

(Deprecated) Sets the border color of the table.

View Demo

class

Assigns a CSS class for styling.

View Demo

id

Assigns a unique ID to the table. Useful for CSS or JavaScript.

View Demo

style

Adds inline CSS styles. Example: style="border: 1px solid black;".

View Demo

title

Tooltip text that shows when you hover over the table.

View Demo
<!DOCTYPE html>
<html>
<body>

<p class="ap">This table has border of '5', you can change the values and see the output. </p>
<table border="5">
<caption>Table Caption</caption>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
</table>

</body>
</html>

Note: Some of the above (like 'bgcolor', 'border', 'align', 'cellpadding', etc.) are deprecated in HTML5, which means they still work in browsers but are not recommended anymore. Instead, use CSS for styling.

'<tr>' Tag - Table Row

The '<tr>' tag defines a row in a table.

Attribute

Description

View Demo

align

Aligns text inside all cells in the row (left, center, right). Deprecated in HTML5.

View Demo

valign

Vertical alignment: top, middle, bottom. Deprecated.

View Demo

bgcolor

Background color for the whole row. Deprecated.

View Demo

background

Sets the background image of the table.

View Demo

class

Adds a CSS class for styling.

View Demo

id

Unique ID for the row. Useful in CSS/JavaScript.

View Demo

style

Inline CSS styles. Example: 'style="background-color: yellow;"'.

View Demo

title

Tooltip shown when you hover over the row.

View Demo

'<td>' Tag - Table Data Cell

The '<td>' tag defines a data cell (normal cell with content).

Attribute

Description

View Demo

colspan

Merges the cell across multiple columns. Example: 'colspan="2"' makes the cell span 2 columns.

View Demo

rowspan

Merges the cell across multiple rows. Example: 'rowspan="3"' spans 3 rows.

View Demo

align

Aligns the text horizontally. Values: 'left', 'center', 'right'. Deprecated.

View Demo

valign

Aligns the content vertically: 'top', 'middle', 'bottom'. Deprecated.

View Demo

bgcolor

Background color of the cell. Deprecated.

View Demo

headers

Links the cell to a '<th>' with an 'id'. Used for screen readers.

View Demo

abbr

Short form of cell content for screen readers.

View Demo

scope

(Usually used in '<th>') Defines if the cell is for a row or column header.

View Demo

class

CSS class for styling.

View Demo

id

Unique ID for the cell.

View Demo

style

Inline CSS styling.

View Demo

title

Tooltip for the cell.

View Demo

'<th>' Tag - Table Header Cell

The '<th>' tag defines a header cell (bold and centered by default).

  • 'colspan': Spans the header across multiple columns.
  • 'rowspan': Spans the header across multiple rows.
  • 'align': Aligns text: 'left', 'center', 'right'. Deprecated.
  • 'valign': Vertical align: 'top', 'middle', 'bottom'. Deprecated.
  • 'scope': Tells browsers and screen readers what the header applies to: 'col', 'row', 'colgroup', 'rowgroup'.
  • 'abbr': A short version of the header text for screen readers.
  • 'headers': Links this header cell to specific data cells.
  • 'bgcolor': Background color of the cell. Deprecated.
  • 'class': CSS class name.
  • 'id': Unique ID for the header cell.
  • 'style': Inline CSS.
  • 'title': Tooltip for the header cell.

Summary Table

Tag Purpose Most Useful Attributes
'<tr>' Table row 'class', 'style', 'bgcolor' (deprecated), 'id'
'<td>' Table data 'colspan', 'rowspan', 'align', 'style', 'id'
'<th>' Table header 'scope', 'colspan', 'rowspan', 'style', 'id'

Attributes of the HTML '<table>' Tag

'<th>' - Table Header

Attributes:

  • 'colspan': Number of columns the cell should span.
  • 'rowspan': Number of rows the cell should span.

Example:

Example 📄

<th colspan="2">Heading</th>

Meaning: This header spans 2 columns.

'<td>' - Table Data

Example:

Example 📄

<td>Apple</td>

Meaning: Displays "Apple" inside a data cell.

'<tr>' - Table Row

Example:

Example 📄

<tr><td>Row Content</td></tr>

Meaning: Adds a new row with one cell.

'<thead>' - Table Head Section

Example 📄

<thead>
<tr><th>Name</th><th>Age</th></tr>
</thead>

This Defines the table header area, usually styled differently.

'<tbody>' - Table Body Section

Example 📄

<tbody>
<tr><td>John</td><td>30</td></tr>
</tbody>

This Defines the main data portion of the table.

'<tfoot>' - Table Footer Section

Example 📄

<tfoot>
<tr><td colspan="2">Total</td></tr>
</tfoot>

The Footer for the table, useful for totals or summary.

'<caption>' - Table Title

Example 📄

<caption>Employee Details</caption>

Displays a title for the table above the content.

'colspan' and 'rowspan'

Example with both 'colspan' and 'rowspan' is as follows:

Example 📄

<td colspan="2" rowspan="2">Merged Cell</td>

The cell spans across 2 columns and 2 rows.

'<colgroup>' - Column Group Styling

Example 📄

<colgroup>
<col span="2" style="background-color: lightgray;">
</colgroup>

Styles columns together within the group.

Examples of the HTML 'table' tag 'attributes'

Example: 'HTML table'

Code : 1 📝

<!DOCTYPE html>
<html>
<body>

<table>
<caption>Table Caption</caption>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>

</body>
</html>

output 📌

Table Caption
Header 1 Header 2 Header 3 Header 4
Data 1 Data 2 Data 3 Data 4
Data 1 Data 2 Data 3 Data 4
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Example: 'HTML table' with border='1'

Code : 2 📝

<!DOCTYPE html>
<html>
<body>

<p class="ap">This table has border of '5', you can change the values and see the output. </p>
<table border="5">
<caption>Table Caption</caption>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
</table>

</body>
</html>

output 📌

This table has border of '5', you can change the values and see the output.

Table Caption
Header 1Header 2Header 3Header 4
Data 1Data 2Data 3Data 4
Data 1Data 2Data 3Data 4
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Example: 'HTML table' with cellpadding='5'

Code : 3 📝

<!DOCTYPE html>
<html>
<body>

<table cellpadding="5px" border="1">
<caption>Table Caption</caption>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
</table>

</body>
</html>

output 📌

Table Caption
Header 1Header 2Header 3Header 4
Data 1Data 2Data 3Data 4
Data 1Data 2Data 3Data 4
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Example: 'HTML table' with cellspacing="5"

Code : 4 📝

<!DOCTYPE html>
<html>
<body>

<table cellspacing="10" border="1">
<caption>Table Caption</caption>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
</table>

</body>
</html>

output 📌

Table Caption
Header 1Header 2Header 3Header 4
Data 1Data 2Data 3Data 4
Data 1Data 2Data 3Data 4
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Example: 'HTML table' with width="600px"

Code : 5 📝

<!DOCTYPE html>
<html>
<body>

<table width="600px" border="1">
<caption>Table Caption</caption>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
</table>


</body>
</html>

output 📌

Table Caption
Header 1Header 2Header 3Header 4
Data 1Data 2Data 3Data 4
Data 1Data 2Data 3Data 4
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Example: 'HTML table' with height="150px"

Code : 6 📝

<!DOCTYPE html>
<html>
<body>

<table height="150px" border="1">
<caption>Table Caption</caption>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
</table>


</body>
</html>

output 📌

Table Caption
Header 1Header 2Header 3Header 4
Data 1Data 2Data 3Data 4
Data 1Data 2Data 3Data 4
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Example: 'HTML table' with align="left"

Code : 7 📝

<!DOCTYPE html>
<html>
<body>

<table align="left" border="1">
<caption>Table Caption</caption>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
</table>


</body>
</html>

output 📌

Table Caption
Header 1Header 2Header 3Header 4
Data 1Data 2Data 3Data 4
Data 1Data 2Data 3Data 4
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Example: 'HTML table' with align="center"

Code : 8 📝

<!DOCTYPE html>
<html>
<body>

<table align="center" border="1">
<caption>Table Caption</caption>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
</table>


</body>
</html>

output 📌

Table Caption
Header 1Header 2Header 3Header 4
Data 1Data 2Data 3Data 4
Data 1Data 2Data 3Data 4
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Example: 'HTML table' with align="right"

Code : 9 📝

<!DOCTYPE html>
<html>
<body>

<table align="right" border="1">
<caption>Table Caption</caption>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
</table>

</body>
</html>

output 📌

Table Caption
Header 1Header 2Header 3Header 4
Data 1Data 2Data 3Data 4
Data 1Data 2Data 3Data 4
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Example: 'HTML table' with bgcolor="yellow"

Code : 10 📝

<!DOCTYPE html>
<html>
<body>

<table bgcolor="yellow" border="1">
<caption>Table Caption</caption>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
</table>

</body>
</html>

output 📌

Table Caption
Header 1Header 2Header 3Header 4
Data 1Data 2Data 3Data 4
Data 1Data 2Data 3Data 4
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Example: 'HTML table' with frame="above"

Code : 11 📝

<!DOCTYPE html>
<html>
<body>

<table frame="above" border="1">
<caption>Table Caption</caption>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
</table>

</body>
</html>

output 📌

Table Caption
Header 1Header 2Header 3Header 4
Data 1Data 2Data 3Data 4
Data 1Data 2Data 3Data 4
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

  • The 'frame' attribute add a frame / border to the table.
  • Here 'frame' as a value 'above', so this will add a 'border/frame' above the table
  • Values: 'void', 'above', 'below', 'hsides', 'vsides', 'lhs', 'rhs', 'box', 'border'. Try This values.

Example: 'HTML table' with rules="rows"

Code : 12 📝

<!DOCTYPE html>
<html>
<body>

<table rules="rows" border="1">
<caption>Table Caption</caption>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
</table>

</body>
</html>

output 📌

Table Caption
Header 1Header 2Header 3Header 4
Data 1Data 2Data 3Data 4
Data 1Data 2Data 3Data 4
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Example: 'HTML table' with rules="cols"

Code : 13 📝

<!DOCTYPE html>
<html>
<body>

<table rules="cols" border="1">
<caption>Table Caption</caption>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
</table>

</body>
</html>

output 📌

Table Caption
Header 1Header 2Header 3Header 4
Data 1Data 2Data 3Data 4
Data 1Data 2Data 3Data 4
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Example: 'HTML table' with rules="all"

Code : 14 📝

<!DOCTYPE html>
<html>
<body>

<table rules="all" border="1">
<caption>Table Caption</caption>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
</table>

</body>
</html>

output 📌

Table Caption
Header 1Header 2Header 3Header 4
Data 1Data 2Data 3Data 4
Data 1Data 2Data 3Data 4
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Example: 'HTML table' with rules="none"

Code : 15 📝

<!DOCTYPE html>
<html>
<body>

<table rules="none" border="1">
<caption>Table Caption</caption>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
</table>

</body>
</html>

output 📌

Table Caption
Header 1Header 2Header 3Header 4
Data 1Data 2Data 3Data 4
Data 1Data 2Data 3Data 4
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Example: 'HTML table' with bordercolor="yellow"

Code : 16 📝

<!DOCTYPE html>
<html>
<body>

<table bordercolor="yellow" border="5">
<caption>Table Caption</caption>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
</table>

</body>
</html>

output 📌

Table Caption
Header 1Header 2Header 3Header 4
Data 1Data 2Data 3Data 4
Data 1Data 2Data 3Data 4
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Example: 'HTML table' with title="HML Table Tag"

Code : 17 📝

<!DOCTYPE html>
<html>
<body>

<table title="HML Table Tag" border="2">
<caption>Table Caption</caption>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
</table>

</body>
</html>

output 📌

Table Caption
Header 1Header 2Header 3Header 4
Data 1Data 2Data 3Data 4
Data 1Data 2Data 3Data 4
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Example: 'HTML table' with background="\images\image2.jpg"

Code : 18 📝

<!DOCTYPE html>
<html>
<body>

<table background="\images\image3.jpg" border="2">
<caption>Table Caption</caption>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
</table>

</body>
</html>

output 📌

Table Caption
Header 1Header 2Header 3Header 4
Data 1Data 2Data 3Data 4
Data 1Data 2Data 3Data 4
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Please Note :
  • The URL '/images/image3.jpg' is used because the image is located in the 'images' folder.
  • If your image is in the same folder as your HTML file, you can simply use 'image3.jpg' as the URL.
  • For more information on file paths, check our complete blog post on 'file path'.

Examples of the HTML 'tr' tag 'attributes'

Example: 'tr' tag 'Attributes' with bgcolor="yellow"

Code : 19 📝

<!DOCTYPE html>
<html>
<body>

<table border="2">
<caption>Table Caption</caption>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr>
<tr bgcolor="yellow"><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
</table>

</body>
</html>

output 📌

Table Caption
Header 1Header 2Header 3Header 4
Data 1Data 2Data 3Data 4
Data 1Data 2Data 3Data 4
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Example: 'tr' tag 'Attributes' with valign="top"

Code : 20 📝

<!DOCTYPE html>
<html>
<body>

<table border="2">
<caption>Table Caption</caption>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr>
<tr valign="top"><td>Data 1 <br> Data 2 <br> Data 3</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
</table>

</body>
</html>

output 📌

Table Caption
Header 1Header 2Header 3Header 4
Data 1
Data 2
Data 3		Data 2Data 3Data 4
Data 1Data 2Data 3Data 4
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Example: 'tr' tag 'Attributes' with valign="middle"

Code : 21 📝

<!DOCTYPE html>
<html>
<body>

<table border="2">
<caption>Table Caption</caption>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr>
<tr valign="middle"><td>Data 1 <br> Data 2 <br> Data 3</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
</table>

</body>
</html>

output 📌

Table Caption
Header 1Header 2Header 3Header 4
Data 1
Data 2
Data 3		Data 2Data 3Data 4
Data 1Data 2Data 3Data 4
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Example: 'tr' tag 'Attributes' with valign="bottom"

Code : 22 📝

<!DOCTYPE html>
<html>
<body>

<table border="2">
<caption>Table Caption</caption>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr>
<tr valign="bottom"><td>Data 1 <br> Data 2 <br> Data 3</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
</table>

</body>
</html>

output 📌

Table Caption
Header 1Header 2Header 3Header 4
Data 1
Data 2
Data 3		Data 2Data 3Data 4
Data 1Data 2Data 3Data 4
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Example: 'tr' tag 'Attributes' with align="right"

Code : 23 📝

<!DOCTYPE html>
<html>
<body>

<table border="2" width="500px">
<caption>Table Caption</caption>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr>
<tr align="right"><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
</table>

</body>
</html>

output 📌

Table Caption
Header 1Header 2Header 3Header 4
Data 1Data 2Data 3Data 4
Data 1Data 2Data 3Data 4
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

The 'align' attribute does not works. If it works then try value like (left, center, right). Deprecated in HTML5

Example: 'tr' tag 'Attributes' with background="\images\image3.jpg"

Code : 24 📝

<!DOCTYPE html>
<html>
<body>

<table border="2" width="500px">
<caption>Table Caption</caption>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr>
<tr background="\images\image3.jpg"><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
</table>

</body>
</html>

output 📌

Table Caption
Header 1Header 2Header 3Header 4
Data 1Data 2Data 3Data 4
Data 1Data 2Data 3Data 4
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Examples of the HTML 'td' tag 'attributes'

Example: 'td' tag 'Attributes' with background="\images\image3.jpg"

Code : 25 📝

<!DOCTYPE html>
<html>
<body>

<table border="2" width="500px">
<caption>Table Caption</caption>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td background="\images\image3.jpg">Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
</table>

</body>
</html>

output 📌

Table Caption
Header 1Header 2Header 3Header 4
Data 1Data 2Data 3Data 4
Data 1Data 2Data 3Data 4
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Example: 'td' tag 'Attributes' with colspan="2"

Code : 26 📝

<!DOCTYPE html>
<html>
<body>

<table border="2" width="500px">
<caption>Table Caption</caption>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td colspan="2">Data 1 / Data 2</td><td>Data 3</td><td>Data 4</td></tr>
</table>

</body>
</html>

output 📌

Table Caption
Header 1Header 2Header 3Header 4
Data 1Data 2Data 3Data 4
Data 1 / Data 2Data 3Data 4
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Example: 'td' tag 'Attributes' with rowspan="2"

Code : 27 📝

<!DOCTYPE html>
<html>
<body>

<table border="2" width="500px">
<caption>Table Caption</caption>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr>
<tr><td rowspan="2">Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td> Data 2</td><td>Data 3</td><td>Data 4</td></tr>
</table>

</body>
</html>

output 📌

Table Caption
Header 1Header 2Header 3Header 4
Data 1Data 2Data 3Data 4
Data 2Data 3Data 4
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Example: 'td' tag 'Attributes' with bgcolor="yellow"

Code : 28 📝

<!DOCTYPE html>
<html>
<body>

<table border="2" width="500px">
<caption>Table Caption</caption>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td bgcolor="yellow">Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
</table>

</body>
</html>

output 📌

Table Caption
Header 1Header 2Header 3Header 4
Data 1Data 2Data 3Data 4
Data 1Data 2Data 3Data 4
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Example: 'td' tag 'Attributes' with background="/images/image3.jpg"

Code : 29 📝

<!DOCTYPE html>
<html>
<body>

<table border="2" width="500px">
<caption>Table Caption</caption>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td background="/images/image3.jpg">Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
</table>

</body>
</html>

output 📌

Table Caption
Header 1Header 2Header 3Header 4
Data 1Data 2Data 3Data 4
Data 1Data 2Data 3Data 4
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Example of <thead>, <tbody>, and <tfoot>

Code : 30 📝

<!DOCTYPE html>
<html>
<body>

<table border="5">
<caption>Table Caption</caption>
<thead>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr>
</thead>
<tbody>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
</tbody>
<tfoot>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
</tfoot>
</table>

</body>
</html>

output 📌

Table Caption
Header 1Header 2Header 3Header 4
Data 1Data 2Data 3Data 4
Data 1Data 2Data 3Data 4
Data 1Data 2Data 3Data 4
Data 1Data 2Data 3Data 4
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

🎨 CSS Styling for Tables

Code : 31 📝

<!DOCTYPE html>
<html>
<head>
<style>

.table1 { background: rgb(249, 111, 106 ); border-collapse: collapse; width: 600px; margin: auto; }
.table1 th, .table1 td, .table1 tr { border: 1px solid lightblue; padding: 10px 20px; }
.table1 caption { border: 1px solid lightblue; padding: 10px; background: rgb(139, 228, 97 ); font-weight: bold; text-align: center; }
.table1 th { background: rgb(232, 119, 145 ); }

</style>
</head>
<body>

<table class="table1">
<caption>Table Caption</caption>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
</table>
</body>
</html>

output 📌

Table Caption
Header 1Header 2Header 3Header 4
Data 1Data 2Data 3Data 4
Data 1Data 2Data 3Data 4
Data 1Data 2Data 3Data 4
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Conclusion

The '<table>' tag and its related elements such as '<tr>', '<th>', '<td>', '<thead>', '<tbody>', and '<tfoot>' play a key role in organizing and displaying data in HTML. With attributes like 'colspan' and 'rowspan', you can customize the layout of table cells for better readability and structure. Understanding tables helps you create more interactive and visually organized websites.

Related Topics:

Frequently Asked Questions (FAQs)

Is the '<table>' tag a block-level element?

Yes, '<table>' is a block-level element.

Can I use CSS with HTML tables?

Yes, tables can be styled using CSS properties like 'border', 'padding', 'width', 'text-align', etc.

What is the difference between '<th>' and '<td>'?

'<th>' is used for headers and is bold by default, while '<td>' is used for regular data.

Can a '<td>' span multiple rows or columns?

Yes, using 'rowspan' and 'colspan' attributes.

Previous Post Next Post