{"id":3519,"date":"2024-12-11T11:54:05","date_gmt":"2024-12-11T16:54:05","guid":{"rendered":"https:\/\/www.montclair.edu\/university-communications\/?page_id=3519"},"modified":"2024-12-11T12:29:14","modified_gmt":"2024-12-11T17:29:14","slug":"tables","status":"publish","type":"page","link":"https:\/\/www.montclair.edu\/university-communications\/web-development-and-experience\/html-tips-and-accessibility\/tables\/","title":{"rendered":"Tables"},"content":{"rendered":"

The table <\/strong>tag is intended to hold tabulated data. Unlike a list or a paragraph, data in a table is given additional meaning by its placement within the row\/column structure.<\/p>\n

Never use a table<\/strong> to control page design layout. If you want to arrange items in rows and columns, see Rows and Columns<\/a>.<\/p>\n

Tables are required to have a thead<\/strong> and tbody<\/strong>, and must use th<\/strong> tags to indicate column and row headers.<\/p>\n

Responsive Tables<\/h2>\n

If your table<\/strong> can be simplified as a series of rows, you can use the class “responsive-table” to have the content re-arrange itself on mobile devices.<\/p>\n\n\n\n\n\n\n\n
Column 1<\/th>\nColumn 2<\/th>\nColumn 3<\/th>\nColumn 4<\/th>\n<\/tr>\n<\/thead>\n
Data 1,1<\/td>\nData 2,1<\/td>\nData 3,1<\/td>\nData 4,1<\/td>\n<\/tr>\n
Data 1,2<\/td>\nData 2,2<\/td>\nData 3,2<\/td>\nData 4,2<\/td>\n<\/tr>\n
Data 1,3<\/td>\nData 2,3<\/td>\nData 3,3<\/td>\nData 4,3<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Code Sample<\/h3>\n
\r\n\r\n&lt;table class="responsive-table"&gt;\r\n&lt;thead&gt;\r\n&lt;tr&gt;\r\n&lt;th scope="col"&gt;Column 1&lt;\/th&gt;\r\n&lt;th scope="col"&gt;Column 2&lt;\/th&gt;\r\n&lt;th scope="col"&gt;Column 3&lt;\/th&gt;\r\n&lt;th scope="col"&gt;Column 4&lt;\/th&gt;\r\n&lt;\/tr&gt;\r\n&lt;\/thead&gt;\r\n&lt;tbody&gt;\r\n&lt;tr&gt;\r\n&lt;td&gt;Data 1,1&lt;\/td&gt;\r\n&lt;td&gt;Data 2,1&lt;\/td&gt;\r\n&lt;td&gt;Data 3,1&lt;\/td&gt;\r\n&lt;td&gt;Data 4,1&lt;\/td&gt;\r\n&lt;\/tr&gt;\r\n&lt;tr&gt;\r\n&lt;td&gt;Data 1,2&lt;\/td&gt;\r\n&lt;td&gt;Data 2,2&lt;\/td&gt;\r\n&lt;td&gt;Data 3,2&lt;\/td&gt;\r\n&lt;td&gt;Data 4,2&lt;\/td&gt;\r\n&lt;\/tr&gt;\r\n&lt;tr&gt;\r\n&lt;td&gt;Data 1,3&lt;\/td&gt;\r\n&lt;td&gt;Data 2,3&lt;\/td&gt;\r\n&lt;td&gt;Data 3,3&lt;\/td&gt;\r\n&lt;td&gt;Data 4,3&lt;\/td&gt;\r\n&lt;\/tr&gt;\r\n&lt;\/tbody&gt;\r\n&lt;\/table&gt;\r\n\r\n<\/pre>\n
Sortable Tables<\/h2>\n
Using the class sortable<\/strong> you can create a table where the visitor can sort by any of the columns. In the column headings you can use the class name sort-default<\/strong> to choose which column the table will be sorted on after page load. If you don’t set a default, the table will be sorted by the first column.<\/p>\n
You can also add the class name desc<\/strong> to reverse the order of the initial sort column.<\/p>\n
If you set data-column-type<\/strong> to date<\/strong> the script will attempt to parse the column’s contents as dates. (If the column’s contents aren’t valid dates, it’ll default back to strings.)<\/p>\n
You cannot use both the sortable<\/strong> and responsive-table<\/strong> classes at the same time.<\/em><\/p>\n\n\n\n\n\n\n\n\n\n
Rank<\/th>\nSales (Millions)<\/th>\nAlbum<\/th>\nArtist<\/th>\nYear<\/th>\n<\/tr>\n<\/thead>\n
1<\/td>\n47<\/td>\nThriller<\/td>\nMichael Jackson<\/td>\n1982<\/td>\n<\/tr>\n
2<\/td>\n41<\/td>\nTheir Greatest Hits 1971-1975<\/td>\nThe Eagles<\/td>\n1976<\/td>\n<\/tr>\n
3<\/td>\n32<\/td>\nHotel California<\/td>\nThe Eagles<\/td>\n1976<\/td>\n<\/tr>\n
4<\/td>\n29<\/td>\nCome on Over<\/td>\nShania Twain<\/td>\n1997<\/td>\n<\/tr>\n
5<\/td>\n29<\/td>\nLed Zeppelin IV<\/td>\nLed Zeppelin<\/td>\n1971<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
You can also use data-column-type=”weekday”<\/strong> to sort by weekday.<\/p>\n\n\n\n\n\n\n\n\n\n
Weekday<\/th>\nMenu<\/th>\n<\/tr>\n<\/thead>\n
Monday<\/td>\nMeatloaf<\/td>\n<\/tr>\n
Tuesday<\/td>\nChicken Pot Pie<\/td>\n<\/tr>\n
Wednesday<\/td>\nMacaroni & Cheese<\/td>\n<\/tr>\n
Thursday<\/td>\nPork Chops<\/td>\n<\/tr>\n
Friday<\/td>\nPizza<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Code Samples<\/h3>\n
\r\n&lt;table class="sortable"&gt;\r\n\t&lt;thead&gt;\r\n\t\t&lt;tr&gt;\r\n\t\t\t&lt;th class="sort-default"&gt;Rank&lt;\/th&gt;\r\n\t\t\t&lt;th&gt;Sales (Millions)&lt;\/th&gt;\r\n\t\t\t&lt;th&gt;Album&lt;\/th&gt;\r\n\t\t\t&lt;th&gt;Artist&lt;\/th&gt;\r\n\t\t\t&lt;th data-column-type="date"&gt;Year&lt;\/th&gt;\r\n\t\t&lt;\/tr&gt;\r\n\t&lt;\/thead&gt;\r\n\t&lt;tbody&gt;\r\n\t\t&lt;tr&gt;\r\n\t\t\t&lt;td&gt;1&lt;\/td&gt;\r\n\t\t\t&lt;td&gt;47&lt;\/td&gt;\r\n\t\t\t&lt;td&gt;Thriller&lt;\/td&gt;\r\n\t\t\t&lt;td&gt;Michael Jackson&lt;\/td&gt;\r\n\t\t\t&lt;td&gt;1982&lt;\/td&gt;\r\n\t\t&lt;\/tr&gt;\r\n\t\t&lt;tr&gt;\r\n\t\t\t&lt;td&gt;2&lt;\/td&gt;\r\n\t\t\t&lt;td&gt;41&lt;\/td&gt;\r\n\t\t\t&lt;td&gt;Their Greatest Hits 1971-1975&lt;\/td&gt;\r\n\t\t\t&lt;td&gt;The Eagles&lt;\/td&gt;\r\n\t\t\t&lt;td&gt;1976&lt;\/td&gt;\r\n\t\t&lt;\/tr&gt;\r\n\t\t&lt;tr&gt;\r\n\t\t\t&lt;td&gt;3&lt;\/td&gt;\r\n\t\t\t&lt;td&gt;32&lt;\/td&gt;\r\n\t\t\t&lt;td&gt;Hotel California&lt;\/td&gt;\r\n\t\t\t&lt;td&gt;The Eagles&lt;\/td&gt;\r\n\t\t\t&lt;td&gt;1976&lt;\/td&gt;\r\n\t\t&lt;\/tr&gt;\r\n\t\t&lt;tr&gt;\r\n\t\t\t&lt;td&gt;4&lt;\/td&gt;\r\n\t\t\t&lt;td&gt;29&lt;\/td&gt;\r\n\t\t\t&lt;td&gt;Come on Over&lt;\/td&gt;\r\n\t\t\t&lt;td&gt;Shania Twain&lt;\/td&gt;\r\n\t\t\t&lt;td&gt;1997&lt;\/td&gt;\r\n\t\t&lt;\/tr&gt;\r\n\t\t&lt;tr&gt;\r\n\t\t\t&lt;td&gt;5&lt;\/td&gt;\r\n\t\t\t&lt;td&gt;29&lt;\/td&gt;\r\n\t\t\t&lt;td&gt;Led Zeppelin IV&lt;\/td&gt;\r\n\t\t\t&lt;td&gt;Led Zeppelin&lt;\/td&gt;\r\n\t\t\t&lt;td&gt;1971&lt;\/td&gt;\r\n\t\t&lt;\/tr&gt;\r\n\t&lt;\/tbody&gt;\r\n&lt;\/table&gt;\r\n<\/pre>\n
 <\/p>\n
&lt;table class="sortable"&gt;\r\n  &lt;thead&gt;\r\n    &lt;tr&gt;\r\n      &lt;th data-column-type="weekday"&gt;Weekday&lt;\/th&gt;\r\n      &lt;th&gt;Menu&lt;\/th&gt;\r\n    &lt;\/tr&gt;\r\n  &lt;\/thead&gt;\r\n  &lt;tbody&gt;\r\n    &lt;tr&gt;\r\n      &lt;td&gt;Monday&lt;\/td&gt;\r\n      &lt;td&gt;Meatloaf&lt;\/td&gt;\r\n    &lt;\/tr&gt;\r\n    &lt;tr&gt;\r\n      &lt;td&gt;Tuesday&lt;\/td&gt;\r\n      &lt;td&gt;Chicken Pot Pie&lt;\/td&gt;\r\n    &lt;\/tr&gt;\r\n    &lt;tr&gt;\r\n      &lt;td&gt;Wednesday&lt;\/td&gt;\r\n      &lt;td&gt;Macaroni &amp;amp; Cheese&lt;\/td&gt;\r\n    &lt;\/tr&gt;\r\n    &lt;tr&gt;\r\n      &lt;td&gt;Thursday&lt;\/td&gt;\r\n      &lt;td&gt;Pork Chops&lt;\/td&gt;\r\n    &lt;\/tr&gt;\r\n    &lt;tr&gt;\r\n      &lt;td&gt;Friday&lt;\/td&gt;\r\n      &lt;td&gt;Pizza&lt;\/td&gt;\r\n    &lt;\/tr&gt;\r\n  &lt;\/tbody&gt;\r\n&lt;\/table&gt;<\/pre>\n","protected":false},"excerpt":{"rendered":"
The table tag is intended to hold tabulated data. Unlike a list or a paragraph, data in a table is given additional meaning by its placement within the row\/column structure. Never use a table to control page design layout. If you want to arrange items in rows and columns, see Rows and Columns. Tables are […]<\/p>\n","protected":false},"author":411,"featured_media":3785,"parent":3510,"menu_order":4,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-3519","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/users\/411"}],"replies":[{"embeddable":true,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/comments?post=3519"}],"version-history":[{"count":2,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3519\/revisions"}],"predecessor-version":[{"id":3735,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3519\/revisions\/3735"}],"up":[{"embeddable":true,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3510"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/media\/3785"}],"wp:attachment":[{"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/media?parent=3519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}