Tag <table> In HTML
Today we will cover HTML Tag Table. By using examples, we anticipate meeting the learning objectives.
The <table> tag in HTML is used to create a table of data on a web page. The <table> element is used to define the table itself, while the <tr> (table row) element is used to define each row of the table, and the <td> (table data) element is used to define each cell within a row.
A HTML Table with rows and columns:
Example:
To add collapsed borders to a table using CSS, you can use the border collapse property on the table element:
Example:
To right-align a table using CSS, you can use the float property on the table element:
Example:
To center-align a table using CSS, you can use the margin property with a value of auto on the table element:
Example:
To add a background color to a table using CSS, you can use the background-color property on the table element:
Example:
Padding to a table can be added using CSS, you can use the padding property on the table element, or on specific cells using the td and th elements:
Example:
Width of a table using CSS, you can use the width property on the table tag:
Example:
The table has 3 header cells defined by the <th> elements, within a <tr> element, inside a <thead> element:
Example:
<caption> tag can be used as the first child of the <table> element, followed by the table’s header and data:
Example:
The rowspan attribute specifies the number of rows a cell should span, and the colspan attribute specifies the number of columns a cell should span:
Example:
Tag Table Uses
The Tag <table> specifies a table in HTML.
Essentially, HTML tables consist of one Tag table <table> element and a number of <tr>, <th>, and <td> tags.
There are three types of Tag Table elements: the <tr> element represents a table row, the <th> element indicates a table header, and the <td> element describes a table cell.
Tables in HTML can further consist of <caption>, <colgroup>, <thead>, <tfoot>, and <tbody> elements.
Tables can be used to display various types of information, such as:
- Tables are commonly used to present tabular data, such as financial information, product specifications, and statistical data.
- Tables can be used to compare different sets of data side-by-side, making it easy for users to compare and contrast different options.
- Tables can be used to present schedules, timetables, and calendars in a structured way.
- Tables can be used to display menus and pricing information, particularly for restaurants, cafes, and other food and beverage businesses.
- Tables can be used to present forms and input fields, making it easy for users to enter data and complete tasks.
- Tables can be used to create layout structures, particularly for email templates and HTML newsletters.
Browser Compatibility
| Element |  |  |  |  |  |
|---|---|---|---|---|---|
| <table> | Yes | Yes | Yes | Yes | Yes |
Predefined CSS
The majority of browsers will show the <table> element with the following values by default in Tag Table:
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}Attributes
Global
The Tag Table <table> is compatible with the Global Attributes in HTML.
Event
The Tag Table <table> is compatible with the Event Attributes in HTML.
Tag Table Benefits
The <table> tag in HTML offers several benefits for presenting data on a web page:
- Tables provide a clear and organized way to present data, making it easier for users to understand and analyze the information presented.
- The <table> tag provides a wide range of attributes and elements that can be used to customize the appearance and functionality of tables, allowing designers to create tables that meet the specific needs of their users.
- Tables can be designed with accessibility in mind, making them easier to use for users with disabilities. For example, designers can use appropriate header cells and labels to provide context and information about the data being presented.
- Tables are widely supported across different web browsers and platforms, ensuring that they are accessible to a wide range of users.
- Tables can be used to present a wide range of data types, from simple lists to complex financial information and schedules.
- Tables can be designed to be responsive, meaning that they can adapt to different screen sizes and devices, making them accessible on mobile devices and other platforms.
