Tables

Demo

Delivery slots:
Delivery Times	Monday	Tuesday	Wednesday	Thursday	Friday
09:00 – 11:00	Closed	Open	Open	Closed	Closed
11:00 – 13:00	Open	Open	Closed	Closed	Closed

HTML Code

<table>
   <tr>
     <th rowspan="2" id="h">Homework</th>
     <th colspan="3" id="e">Exams</th>
     <th colspan="3" id="p">Projects</th>
   </tr>
   <tr>
     <th id="e1" headers="e">1</th>
     <th id="e2" headers="e">2</th>
     <th id="ef" headers="e">Final</th>
     <th id="p1" headers="p">1</th>
     <th id="p2" headers="p">2</th>
     <th id="pf" headers="p">Final</th>
   </tr>
   <tr>
    <td headers="h">15%</td>
    <td headers="e e1">15%</td>
    <td headers="e e2">15%</td>
    <td headers="e ef">20%</td>
    <td headers="p p1">10%</td>
    <td headers="p p2">10%</td>
    <td headers="p pf">15%</td>
   </tr>
  </table>

CSS Code

 	th {
 		overflow-wrap: break-word;
    border:  1px solid black;

 	}
  tr {
    border:  1px solid black;

  }

Why use tables?

Tables play a fundamental role in web development by providing a structured and organized way to present data on a webpage. Designers and developers use tables to arrange information into rows and columns, creating a grid-like structure that facilitates clarity and comprehension. Tables are particularly useful when displaying data sets, such as financial information, schedules, or comparison charts, as they allow users to easily compare values across different categories. Additionally, tables are essential for creating accessible layouts, ensuring that information is presented in a logical order that benefits users who rely on screen readers or other assistive technologies. Whether it’s for tabular data or creating responsive layouts, tables serve as a versatile tool in web development, enhancing the presentation and accessibility of content on websites and web applications.

What are some accessibility concerns?

Row and Column Headers
- Concern: Screen reader users may struggle to comprehend table data without proper header information.
- Mitigation: Use the <th> element to mark up header cells and associate them with the corresponding rows and columns. This ensures screen readers convey the relationships between headers and data cells.
Table Structure and Semantics:
- Concern: Incorrect or improper use of HTML elements may lead to confusion for users relying on assistive technologies.
- Mitigation: Follow semantic HTML practices, using <table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, and <td> elements appropriately to convey the table’s structure and hierarchy.
Complex Tables and Summary:
- Concern: Complex tables may be challenging for users with cognitive disabilities or those using screen readers.
- Mitigation: Provide a concise and informative summary using the summary attribute in the <table> tag. This summary should describe the structure and purpose of the table.
Color and Contrast:
- Concern: Color-based distinctions in tables may be inaccessible to users with color blindness or low vision.
- Mitigation: Use color as an enhancement and ensure sufficient contrast between text and background. Provide additional visual cues like borders, patterns, or icons for differentiation.
Responsive Design and Data Tables:
- Concern: Tables may become difficult to navigate on smaller screens or in different viewports.
- Mitigation: Implement responsive design principles to ensure that tables adapt to various screen sizes. Consider alternative layouts or hiding less critical columns on smaller screens.
Table Header Scoping:
- Concern: Incorrect header scoping may lead to confusion about which headers apply to certain data cells.
- Mitigation: Use the scope attribute with values like “row” or “col” to explicitly define the scope of header cells. This helps screen readers associate headers with their respective data cells.
Dynamic Content and Updates:
- Concern: Tables that update dynamically may not be announced to screen reader users, causing them to miss important changes.
- Mitigation: Use ARIA live regions or other appropriate techniques to alert screen readers to dynamic updates in tables. Ensure that changes are announced clearly and promptly.

1.3.1
Info and Relationships ( level A ) :
Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
4.1.2
Name, Role, Value ( level A ) :
For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.
4.1.3
Status Messages ( level AA ) :
In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus.