- 3 years ago
- Shahzad Gujjar
- 2,942 Views
-
2
This tutorial will teach you how to use HTML tables to display tabular data.
Creating Tables in HTML
Data can be organized into rows and columns in an HTML table. They’re often used to show tabular data such as product listings, customer information, financial reports, and so on.
The <table> element can be used to make a table. The <tr> elements can be used to create rows within the <table> element, and the <td> elements to be used to create columns within a row. The <th> element can also be used to describe a cell as a header for a group of table cells.
The table’s most fundamental structure is shown in the following example.
<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>
By default, tables do not have any borders. To add borders to the tables, use the CSS border property. By default, table cells are only large enough to hold the contents. The CSS padding property can be used to fill more space around the content of table cells.
The following style rules give the table a 1-pixel border and 10-pixel padding in its cells.
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}
By default, the table’s borders and cells are separated from one another. Using the border-collapse property on the <table> element, you can collapse them into one.
Text within the <th> elements is also shown in bold font, with the cell’s horizontal center-aligned by default. The CSS text-align property can be used to change the default alignment.
The table borders are collapsed and the table header text is aligned to the left using the following style rules.
table {
border-collapse: collapse;
}
th {
text-align: left;
}
Please see the CSS tables tutorial for more information on how to style HTML tables.
Most of the attributes of the table> element, such as border, cellpadding, cellspacing, width, align, and so on. Avoid using them in HTML5 because they were used for styling table appearances in previous editions. Instead, style HTML tables with CSS.
Spanning Multiple Rows and Columns
You can span table rows and columns across multiple other rows and columns using spanning.
A table cell cannot normally pass through the space below or above another table cell. The rowspan and colspan attributes, on the other hand, can be used to span multiple rows or columns in a table.
To see how colspan works in practice, consider the following example:
<table>
<tr>
<th>Name</th>
<th colspan="2">Phone</th>
</tr>
<tr>
<td>John Carter</td>
<td>5550192</td>
<td>5550152</td>
</tr>
</table>
You can also use the rowspan attribute to create a cell that spans several rows. Let’s look at an example to see how row spanning works in practise:
<table>
<tr>
<th>Name:</th>
<td>John Carter</td>
</tr>
<tr>
<th rowspan="2">Phone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
Adding Captions to Tables
The <caption> element allows you to give your tables a caption (or title).
After the opening <table> tag, the <caption> element must be put. The caption comes at the top of the table by default, but you can move it using the CSS caption-side property.
This element is used in a table in the following example.
<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>
Defining a Table Header, Body, and Footer
<thead>, <tbody>, and <tfoot> are HTML tags that help you make a more structured table by specifying header, body, and footer regions, respectively.
The use of these elements is demonstrated in the following example.
<table>
<thead>
<tr>
<th>Items</th>
<th>Expenditure</th>
</tr>
</thead>
<tbody>
<tr>
<td>Stationary</td>
<td>2,000</td>
</tr>
<tr>
<td>Furniture</td>
<td>10,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total</th>
<td>12,000</td>
</tr>
</tfoot>
</table>
NOTE: The <tfoot> element can appear before or after the <tbody> and <tr> elements in HTML5, but it must come after any <caption>, <colgroup>, and <thead> elements.
Tables should not be used to create web page layouts. Table layouts take longer to render and are more difficult to keep up with. It can only be used to show tabular data.
- 3 years ago
- Shahzad Gujjar
- 2,942 Views
-
2
