HTML Tables
HTML tables are used to display data in a grid-like structure of rows and columns. They are versatile and find applications in various contexts, including data presentation, layout structuring, and more. Tables are especially useful when you need to organize and represent data in a clear and organized manner.
In the below PDF we discuss about HTML Tables in detail in simple language, Hope this will help in better understanding.
Basic Table Structure:
HTML tables consist of three main elements:
1. <table>:
This is the container for the entire table. It contains one or more rows and columns.
2. <tr>:
The table row element defines a horizontal row within the table. You can have multiple rows within a table.
3. <td>: The table data element represents individual cells within a row. These cells hold the actual content.
Here’s a basic example of a table structure:
<table>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
Adding Headers:
In addition to data cells, tables often include header cells to provide context for the content in each column. You can use the <th> element for header cells instead of <td>:
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
</tr>
</table>
Table Attributes:
HTML tables offer various attributes to control their behavior and appearance. Some of the commonly used attributes include:
- border: Sets the border width around the table.
- width: Defines the width of the table.
- cellpadding: Controls the padding within table cells.
- cellspacing: Manages the spacing between cells.
- align: Aligns the table within the page (e.g., “left,” “center,” “right”).
Related Question
An HTML table is a structure used to display data in rows and columns on a web page. It consists of rows, each containing cells organized in columns.
You can create a basic HTML table using the <table> element to define the table, <tr> for table rows, and <td> or <th> for table cells.
<td> (table data) is used for regular table cells, while <th> (table header) is used for cells that represent column or row headers. <th> cells are typically bold and centered by default.
You can merge cells both horizontally and vertically using the colspan and rowspan attributes on <td> or <th> elements.
You can use the border attribute on the <table> element or use CSS to style the table with border properties like border-collapse and border on specific table elements.
Relevant
Document Object Model (DOM) The
HTML Canvas Basics HTML Canvas
How to use SVG in
HTML Input Atrributes HTML input
HTML Event Attributes HTML event
HTML Global Attribute HTML global
HTML Attributes HTML attributes are
