Tables
When adding tabular data, it needs to be both responsive and ADA compliant. The first thing to do is to make sure the information actually needs to be in a table and not just a list other other module. Use the following example to decide if you need to create a table.
This information is not in a table because there are no header rows:
Breakfast: $2.50
Lunch: $5.75
Dinner: $12.50
This information is in a table because there is a header row:
| Meal | Price |
|---|---|
| Breakfast | $2.00 |
| Lunch | $5.50 |
| Dinner | $12.75 |
| Dessert | Always Free |
This information is also in a table because there are two header rows (one header for the columns and one header for the rows):
| Meal | Time | Price | Dessert |
|---|---|---|---|
| Brunch | 10:30 a.m. | $7.00 | Free M-F |
| Dinner | 5:30 p.m. | $12.50 | Always free |
Once you decide the data needs to be in a table, follow these instructions to add your table:
- Use the Responsive ADA Table module.
- Uncheck “Can have entities” since everything will be added in the component itself. The styling for the table is already included in the module component.
- Change the name of the module to the page where the table will be located and the name of the table. For example, if you are adding a table for scholarships on a counseling page, the name of the table would be Counseling - Scholarships Table.
Watch the video below for detailed instructions on how to add the table data to the component. You can also view the detailed written instructions.
Table Styling Tips
Once you have added your table, adjust the styling to match the style of the site. Notice the tables shown above are styled with different padding sizes as well as different max-widths. The following are common styles you will need to adjust:
- Borders: The module template includes styling for borders. To remove borders, replace the border styles with 0. (border: 0;)
- Width: Adjust max-width of table as needed.
Remember to check the site responsively and in all browsers.