Make sure tables are formatted with a table element

Tables consist of rows and columns. The data in those rows and columns is interrelated. For visitors with a visual impairment, this relationship is not immediately clear. For these visitors it is important that these relationships are also registered in the code.

Structure and relationships that are only conveyed through design, cannot be (properly) perceived by visitors who are blind or visually impaired. For these visitors it is important to also register the structure in the code. For example, software can also determine the structure and relationships on the web page.

Bezoekers die gebruik maken van een schermlezer kunnen makkelijker door een lijst navigeren. Schermlezers geven bijvoorbeeld aan hoeveel onderdelen er in de lijst staan en bieden de mogelijkheid om de lijst gelijk over te slaan.

Make sure that tables are formatted with a table element (<​table>). This element must also specify what a table headers are and what the data cells are. The table headers are coded with a <​th> element, and the data cells with a <​td> element.

It looks like this in the code:

				
					
				
			

Also give the table a short description. This description is coded with a <caption> element. A good description helps visitors find a table and understand what the table is about.

It looks like this in the code:

				
					
				
			

A table can (in many cases) be inserted in a CMS. Determine the number of rows and columns, and precisely indicate what the table headers are. This automatically formats the table with the correct HTML elements.