Basic table structure: table, tr, td, th in html
If you want to display table i.e. normal text content data and information in row and column format order in HTML web page, then you can create and display tabular data and information in web page using HTML table tag. In table in HTML web page, you will learn about table, table row, table data, table heading, and many other table attributes in detail.
So, let’s know the table tag attributes <table>, <tr>, <td>, and <th> tags in HTML.
HTML basic table structure.
- <table> tag attributes – Table tag is used to create new table in HTML web page.
- <tr> tag attributes – Using table row tag, you can create number of new table rows in created table in HTML web page as per requirement.
- <td> tag attributes – You can create number of table data cells as per requirement in HTML web page.
- <th> tag attributes – You can create table header cell as per requirement in existing HTML web page.
Table example in an HTML web page.
Table example in an HTML web page, with all table tag attributes explained.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title> Html Table Tag Attributes</title>
<style>
table {
color:red;
font-size:1.3em;
width: 80%;
border-collapse: collapse;
}
th, td {
border: 2px solid blue;
padding: 6px;
text-align: justify;
margin:10px;
font-family: times new roman;
}
th {
background-color: yellow;
font-family: monotype corsiva;
}
</style>
</head>
<body>
<h1><center>Web Development Course Table</center></h1>
<table>
<thead>
<tr>
<th>#.</th>
<th>Course Name.</th>
<th>Duration.</th>
<th>Price.</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>Html</td>
<td>1 Month</td>
<td>Rs – 499</td>
</tr>
<tr>
<td>2.</td>
<td>Css </td>
<td>2 Month</td>
<td>Rs – 799</td>
</tr>
<tr>
<td>3.</td>
<td>Php </td>
<td>2 Month</td>
<td>Rs – 899</td>
</tr>
<tr>
<td>4.</td>
<td>JavaScript </td>
<td>2 Month</td>
<td>Rs – 999</td>
</tr>
</tbody>
</table>
</body>
</html>
Table example in an HTML web page.
<table> tag – When table structure or layout is to be created in HTML web page, then table tag designs the entire table structure.
Basic HTML table syntax.
<table>
<!– add desired table row, column cell, table heading, and more element –>
</table>
<thead> tag – In HTML web page, table header or table heading previews particular information by grouping it in bold heading. Although table heading tag has no important role. But sometimes if you want to preview the first row and cell element of the table in heading order, then use table heading tag.
Basic HTML thead tag syntax.
<thead>
<tr>
<th>Table row cell 1 heading 1 </th>
<th> Table row 1 column 2 heading 2 </th>
<th>Table row 1 column 3 heading 3 </th>
<th> Table row 1 column 4 heading 4 </th>
</tr>
</thead>
<tbody> tag – Groups and displays manually typed text content in a new table created in an HTML web page. Although this tag is not important, but this tag helps you to display table body content by adjusting it in a particular body block.
Basic HTML tbody tag syntax.
<tbody>
<tr>
<td>Table Data </td>
<td>Table Data</td>
<td>Table Data </td>
<td>Table Data</td>
</tr>
</tbody>
<tr> tag – Used to create a new table row in a table in an HTML web page. It can be displayed as a table row. An individual <tr> table row in a table can contain one or more <th> table headings or <td> table data content.
Basic HTML tr tag syntax.
<tr>
<td>Table Row Content </td>
<td>Table Row Content</td>
<td>Table Row Content</td>
<td>Table Row Content</td>
</tr>
<th> tag – In HTML web page, header and heading text in the first row header cell of the table is bolded and previewed in heading format. Table heading text is displayed in big bold characters, and normal table text is previewed in normal format.
Basic HTML table heading tag syntax.
<th>table Header </th>
<th>table Header </th>
<td> tag – Creates table data cell in HTML web page. In table cell, you can store and display table cell data as per your requirement. Table cell and table data have an important role in a complete table structure.
Basic HTML table cell data tag syntax.
<td>Table Cell Data</td>
<td>Table Cell Data</td>
Table attributes and styling in HTML web page.
colspan tag – In HTML web page, table colspan tag increases the width of table cell as per requirement. Sometimes you need to display a table cell by making it a little longer or spread out, then use table colspan tag.
Basic HTML table colspan tag syntax.
<td colspan=”4″>Write the table text content you want to display with table colspan tag</td>
rowspan tag – In HTML web page, table rowspan tag is used to specify how wide a particular table row is or how much rows are spread out in a table.
Basic HTML table rowspan tag syntax.
<td rowspan=”4″>Write the table text content you want to display with table rowspan tag</td>
Table CSS Styling – In HTML web pages, tables are displayed with simple look and layout, use CSS styles to preview the created table in HTML web page better and to style it with advanced table theme. CSS styles make your table structure layout attractive and more commercial.
<style>
table {
color:red;
font-size:1.3em;
width: 80%;
border-collapse: collapse;
}
th, td {
border: 2px solid blue;
padding: 6px;
text-align: justify;
margin:10px;
font-family: times new roman;
}
th {
background-color: yellow;
font-family: monotype corsiva;
}
</style>
Table Tag Attributes Detail Explanation.
- <table> tag – is a container for complete table structure layout.
- <thead> tag – Previews the first row heading information in a table.
- <tbody> tag – The information holder for the table body rows written in a table.
- <tr> tag – Creates the number of new rows in a table.
- <th> tag – Creates and displays table header cell information.
- <td> tag – Creates and displays a table data cell element.
