| 2BA | My
Tables
Introduction
Regular HTML tables are fundamental elements for displaying tabular data on a web page. They consist of rows and columns, with each cell containing data. Unlike DataTables, regular tables don't include advanced features such as pagination and sorting out of the box. However, they provide a simple and straightforward way to organize and present information.
Structure of a Table
A basic table structure includes the <table> element to define the table, <thead> for the table header, <tbody> for the table body, and <tr> for rows. Inside rows, you use <th> for header cells and <td> for data cells.
Example
Let's create a simple table with three columns: ID, Name, and Age.
| ID | Name | Age |
|---|---|---|
| 1 | John Doe | 25 |
| 2 | Jane Smith | 30 |
| 3 | Bob Johnson | 22 |
In this example, we use the table, thead, tbody, tr, th, and td elements to structure our table. The table-bordered class adds borders to the table cells for better visibility.
Usage
Inside our websystem, we ususally add either column headers or panel headings in order to get a clear view of what the table holds. Furthermore the rows are usually visualized with the "zebra style" (rows automatically alternating in two color tones) to make the tables more readable.
Any buttons or links are displayed using the primary color, using the "text-primary" class. For example, "#6dbe00" . Additionally, in such cases, a hover effect is applied to suggest interactive capabilities. When functionalities are not always as intuitive, tooltips are added to provide context.
Best Practices:
- Data Integrity: Ensure that data within the table is accurate, relevant, and consistent with the intended purpose of the table.
- Accessibility: Use semantic HTML elements to enhance accessibility, ensuring that screen readers and other assistive technologies can interpret the table structure correctly.
- Responsive Design: Design tables to adapt gracefully to different screen sizes and orientations, providing an optimal viewing experience across devices.
By following these best practices, you can create tables that effectively communicate information and contribute to a positive user experience within our web application.
Content Considerations:
When deciding whether to use a table to present data, consider the following:
- Data Complexity: Tables are best suited for displaying structured data with multiple rows and columns. For simpler data presentations, alternative formats such as lists or cards may be more appropriate.
- Interactivity: If users need to perform actions on the data, such as sorting, filtering, or editing, consider using interactive table components or integrating with JavaScript libraries to enhance functionality.
- Performance: Be mindful of the amount of data being loaded into tables, especially for large datasets. Implement pagination, lazy loading, or server-side processing as needed to optimize performance and ensure responsive user experiences.