{"id":10481,"date":"2021-01-19T14:36:56","date_gmt":"2021-01-19T19:36:56","guid":{"rendered":"https:\/\/www.med.unc.edu\/webguide\/?page_id=10481"},"modified":"2026-04-02T12:59:53","modified_gmt":"2026-04-02T16:59:53","slug":"tables","status":"publish","type":"page","link":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/tables\/","title":{"rendered":"Tables"},"content":{"rendered":"<p>Tables should only be used to present tabular data (rows and columns of related information). They should <strong>not<\/strong> be used for layout or visual formatting, as this creates accessibility barriers and can cause issues on mobile devices.<\/p>\n<p>Consider presenting information without a table. If the same information can be presented using headings and lists, this is preferable.<\/p>\n<h2>Covered In This Tutorial<\/h2>\n<ul class=\"condensed\">\n<li><a href=\"#best-practices\">Best Practices<\/a><\/li>\n<li><a href=\"#screen-reader-experience\">Visual vs. Screen Reader Experience<\/a><\/li>\n<li><a href=\"#create-table\">How to Create a Table<\/a><\/li>\n<li><a href=\"#make-accessible\">Make the Table Accessible<\/a>\n<ul>\n<li><a href=\"#captions\">Table Captions<\/a><\/li>\n<li><a href=\"#headers\">Column and Row Headers<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#examples\">Examples<\/a><\/li>\n<li><a href=\"#remove-formatting\">Removing Unwanted Table Formatting<\/a><\/li>\n<li><a href=\"#videos\">Video Tutorials<\/a><\/li>\n<li><a href=\"#test\">Test for Accessibility<\/a><\/li>\n<li><a href=\"#resources\">Resources<\/a><\/li>\n<\/ul>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2><a id=\"best-practices\"><\/a>Best Practices<\/h2>\n<ul class=\"condensed\">\n<li>Use tables only for data: Do not use tables for page layout.<\/li>\n<li>Keep tables simple\n<ul>\n<li>Avoid merged cells (spanned cells).<\/li>\n<li>Avoid blank cells. Use text such as &#8220;N\/A&#8221; or &#8220;none&#8221; to indicate that there is no data.<\/li>\n<li>Don&#8217;t use nested tables.<\/li>\n<li>Consider splitting complex tables into multiple simple ones.<\/li>\n<\/ul>\n<\/li>\n<li>Ensure the table is accessible.\n<ul>\n<li>Add a table caption (or heading) to describe the table.<\/li>\n<li>Use column and\/or row headings so screen readers can announce them properly.<\/li>\n<\/ul>\n<\/li>\n<li>Ensure tables are responsive and mobile-friendly\n<ul>\n<li>Avoid wide tables that force visitors to scroll left and right.<\/li>\n<li>Try to limit the number of columns or consider breaking the data into multiple smaller tables.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2 style=\"color: #333333;\"><a id=\"screen-reader-experience\"><\/a>Visual vs. Screen Reader Experience<\/h2>\n<p>Sighted users can scan tables and visually connect data with the correct row and column headers. People using screen readers cannot make these visual associations so extra HTML markup is needed.<\/p>\n<p>With proper markup (headers, and scope), screen readers announce the associated headers as they move through the table cell by cell. For instance, in the table below, sighted visitors can easily see where\u00a0<strong>Biology 205<\/strong>\u00a0is held. Adding the proper markup ensures screen reader users get the same clarity.<\/p>\n<table class=\"table table-bordered table-condensed\">\n<tbody>\n<tr>\n<th scope=\"col\">Department<\/th>\n<th scope=\"col\">Class #<\/th>\n<th scope=\"col\">Section<\/th>\n<th scope=\"col\">Room #<\/th>\n<th scope=\"col\">Days<\/th>\n<th scope=\"col\">Time<\/th>\n<th scope=\"col\">Instructor<\/th>\n<\/tr>\n<tr>\n<th scope=\"&quot;col\">BIO<\/th>\n<td>100<\/td>\n<td>1<\/td>\n<td>5<\/td>\n<td>Mon, Wed, Fri<\/td>\n<td>10 AM &#8211; 11 AM<\/td>\n<td>Brown<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>102<\/td>\n<td>1<\/td>\n<td>5<\/td>\n<td>Tue, Thur<\/td>\n<td>11 AM &#8211; 12 PM<\/td>\n<td>Smith<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>205<\/td>\n<td>2<\/td>\n<td>6<\/td>\n<td>Tue, Thur<\/td>\n<td>9 AM &#8211; 10 AM<\/td>\n<td>Brown<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>315<\/td>\n<td>3<\/td>\n<td>6<\/td>\n<td>Mon, Wed, Fri<\/td>\n<td>1 PM &#8211; 2 PM<\/td>\n<td>Smith<\/td>\n<\/tr>\n<tr>\n<th scope=\"&quot;col\">BUS<\/th>\n<td>150<\/td>\n<td>1<\/td>\n<td>13<\/td>\n<td>Mon, Wed, Fri<\/td>\n<td>9 AM &#8211; 10 AM<\/td>\n<td>Roberts<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>210<\/td>\n<td>2<\/td>\n<td>8<\/td>\n<td>Mon, Wed, Fri<\/td>\n<td>8 AM &#8211; 9 AM<\/td>\n<td>Garcia<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Without Proper Markup (What a screen reader user hears)<\/h4>\n<blockquote style=\"margin-left: 25px;\"><p>&#8220;Table with 10 columns and 7 rows. Department, Class Number, Section, Room Number, Days, Time, Instructor, BIO, 100, 1, 5, Mon, Wed, Fri, 10 AM &#8211; 11AM, Brown, 102, 1, 5, Tue, Thur, 11 AM &#8211; 12 AM, Smith, 205, 2, 6, Tue, Thur, 9 AM &#8211; 10 AM, Brown, 315, 3, 6, Mon, Wed, Fri, 1 PM &#8211; 2 PM, Smith, BUS, 150, 1, 13, Mon, Wed, Fri, 9AM &#8211; 10 AM, Roberts, 210, 2, 8, Mon, Wed, Fri, 8 AM &#8211; 9 AM, Garcia.<\/p><\/blockquote>\n<p>After listening to that, would you know where Biology 205 meets? Probably not &#8211; the relationships between headers and data aren\u2019t conveyed.<\/p>\n<h4>With Proper Markup (Clear, associated announcements)<\/h4>\n<blockquote style=\"margin-left: 25px;\"><p>\u201cTable, 7 rows, 10 columns&#8230; Row 4: Department Biology; Class Number 205; Section 2; Room Number 6; Days Tue, Thu; Time 9:00 AM\u201310:00 AM; Instructor Brown.\u201d<\/p><\/blockquote>\n<p>Now the location for Biology 205 is obvious: Room 6.<\/p>\n<p><em>This is a modified example from\u00a0<a href=\"https:\/\/webaim.org\/techniques\/tables\/#uses\">Creating Accessible Tables<\/a>\u00a0on WebAIM.<\/em><\/p>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2><a id=\"create-table\"><\/a>How To Create a Table<\/h2>\n<ol>\n<li>Place your cursor where you want the table to appear.<\/li>\n<li>Click either the <strong>Table menu<\/strong> or the the <strong>Table icon<\/strong> in the editor toolbar.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14522\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/10\/editor-table-options.gif\" alt=\"Screenshot of the WordPress editor highlighting the table options.\" width=\"587\" height=\"115\" \/><\/li>\n<li>Select the <strong>Table<\/strong> option.<\/li>\n<li>Drag your cursor along the table preview, to select the desired number of rows and columns. This will insert an empty table into your page.<\/li>\n<li>Enter your data into the cells.<\/li>\n<li><a href=\"#captions\">Add a table <strong>caption<\/strong><\/a> (see detailed instructions below).<\/li>\n<li><a href=\"#headers\">Label all <strong>column and\/or row headings<\/strong><\/a> along with the corresponding <strong>scope<\/strong> attribute (see detailed instructions below).<\/li>\n<li>Use the table menu or icon options to add or delete rows and columns as needed.<\/li>\n<li>Optional &#8211; <a href=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/tables\/table-styles\/\">add a table class to style the table<\/a>.<\/li>\n<\/ol>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2><a id=\"make-accessible\"><\/a>Make the Table Accessible<\/h2>\n<p>Though not required, tables should include a short description so all users understand what the data represents. This can be done with either a table caption, an HTML heading, or both.<\/p>\n<h3><a id=\"captions\"><\/a>Table Captions (&lt;caption&gt;)<\/h3>\n<ul>\n<li>A &lt;caption&gt; is part of the table itself and is programmatically tied to that table.<\/li>\n<li>Screen readers announce captions when the table is reached, giving users helpful context before hearing the data.<\/li>\n<li>Captions are especially useful when there are multiple tables on a page.<\/li>\n<li>Keep captions short \u2014 one brief line or phrase.<\/li>\n<\/ul>\n<h4>How To Add a Caption<\/h4>\n<ul>\n<li>Place your cursor somewhere inside the table.<\/li>\n<li>Select the <strong>Table icon<\/strong> or the <strong>Table menu<\/strong> in the editor, then choose <strong>Table Properties<\/strong>.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14522\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/10\/editor-table-options.gif\" alt=\"Screenshot of the WordPress editor highlighting the table options.\" width=\"587\" height=\"115\" \/><\/li>\n<li>Add a check next to the <strong>Caption<\/strong> option.<\/li>\n<li>Click <strong>Ok<\/strong>.<\/li>\n<li>A blank field (the caption) will display across the top of the table.<\/li>\n<li>Click inside the caption area and write a brief description of what the table contains.<\/li>\n<\/ul>\n<h4>Headings Before Tables (H2, H3, etc.)<\/h4>\n<ul>\n<li><a href=\"https:\/\/www.med.unc.edu\/webguide\/accessibility\/headings\/\">Headings<\/a> are part of the page structure and help users navigate content.<\/li>\n<li>A heading placed directly before a table gives context but is not programmatically associated with the table.<\/li>\n<\/ul>\n<h4>Using a Heading AND a Table Caption<\/h4>\n<ul>\n<li>Using both gives clarity and accessibility for all users.<\/li>\n<li>Avoid duplication \u2014 don\u2019t repeat the exact same text in both the heading and the caption.<\/li>\n<li>Neither is required, but both are helpful when used correctly.<\/li>\n<\/ul>\n<h4>Styling the Caption<\/h4>\n<p>A <a href=\"https:\/\/www.med.unc.edu\/webguide\/accessibility\/headings\/\">heading<\/a> can be applied to the caption to change the font styles.<\/p>\n<ol>\n<li>Select the entire caption.<\/li>\n<li>In the toolbar, locate the <strong>formatting drop-down menu<\/strong> that typically displays \u201c<strong>Paragraph<\/strong>\u201d by default.<\/li>\n<li>Click the menu and select the appropriate heading level.<\/li>\n<\/ol>\n<h3><a id=\"headers\"><\/a>Row and Column Headers<\/h3>\n<p>Properly marked <strong>header cells<\/strong>\u00a0help screen readers communicate how table data relates across rows and columns, ensuring users who rely on assistive technology can interpret the information as clearly as sighted visitors. Adding a <strong>scope<\/strong> attribute to each header cell further defines whether it applies to a row or a column, strengthening these associations.<\/p>\n<p>In html, the <strong>&lt;td&gt;<\/strong> element defines a <strong>table data<\/strong> cell. By default, all cells will initially be &lt;td&gt; cells. <strong>Any cells used as headers need to be converted to &lt;th&gt; cells which defines a table header<\/strong>.<\/p>\n<p>Each <strong>&lt;th&gt;<\/strong> also needs a <strong>scope<\/strong> attribute to identify whether it&#8217;s a column or row header. This ensures assistive technologies can correctly associate headers with the right data cells.<\/p>\n<h4>How To<\/h4>\n<ol>\n<li>You should have already created a table and added data to the table as well as a table caption.<\/li>\n<li>Define <strong>column<\/strong> headers:\n<ol>\n<li>Drag across all of the <strong>column<\/strong> header cells to select them.<\/li>\n<li>In the Editor, select <strong>Table<\/strong> <strong>\u2192<\/strong>\u00a0<strong>Cell<\/strong>\u00a0<strong>\u2192<\/strong>\u00a0<strong>Table cell properties.\u00a0<\/strong>This will bring up a pop-up window.<\/li>\n<li>Set the <strong>Cell Type<\/strong> to a <strong>Header Cell<\/strong>.<\/li>\n<li>Set the <strong>Scope<\/strong> to <strong>Column<\/strong>.<\/li>\n<li>Select\u00a0<strong>OK<\/strong>.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14533 imgBorderMed\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/10\/table-header-column.png\" alt=\"Screenshot of the table cell properties highlighting the cell type and scope settings for columns.\" width=\"325\" height=\"247\" srcset=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/10\/table-header-column.png 393w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/10\/table-header-column-300x228.png 300w\" sizes=\"auto, (max-width: 325px) 100vw, 325px\" \/><\/li>\n<\/ol>\n<\/li>\n<li>Define <strong>row<\/strong> headers:\n<ol>\n<li>Drag down over all of the <strong>row<\/strong> header cells to select them.<\/li>\n<li>In the menu of the Visual Editor, select <strong>Table<\/strong> <strong>\u2192<\/strong>\u00a0<strong>Cell<\/strong>\u00a0<strong>\u2192<\/strong>\u00a0<strong>Table cell properties.\u00a0<\/strong>This will bring up a pop-up window.<\/li>\n<li>Set the <strong>Cell Type<\/strong> to a <strong>Header Cell<\/strong>.<\/li>\n<li>Set the <strong>Scope<\/strong> to <strong>Row<\/strong>.<\/li>\n<li>Select\u00a0<strong>OK<\/strong>.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14534 imgBorderMed\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/10\/table-header-row.png\" alt=\"Screenshot of the table cell properties highlighting the cell type and scope settings for rows.\" width=\"325\" height=\"244\" srcset=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/10\/table-header-row.png 395w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/10\/table-header-row-300x226.png 300w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/10\/table-header-row-280x210.png 280w\" sizes=\"auto, (max-width: 325px) 100vw, 325px\" \/><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<h4>Example Table<\/h4>\n<table style=\"width: 100%; border-collapse: collapse;\">\n<caption>This is the Caption<\/caption>\n<tbody>\n<tr>\n<th style=\"width: 33.3333%;\" scope=\"col\">Column Heading 1<\/th>\n<th style=\"width: 33.3333%;\" scope=\"col\">Column Heading 2<\/th>\n<th style=\"width: 33.3333%;\" scope=\"col\">Column Heading 3<\/th>\n<\/tr>\n<tr>\n<th style=\"width: 33.3333%;\" scope=\"row\">Row Heading 1<\/th>\n<td style=\"width: 33.3333%;\">Data<\/td>\n<td style=\"width: 33.3333%;\">Data<\/td>\n<\/tr>\n<tr>\n<th style=\"width: 33.3333%;\" scope=\"row\">Row Heading 2<\/th>\n<td style=\"width: 33.3333%;\">Data<\/td>\n<td style=\"width: 33.3333%;\">Data<\/td>\n<\/tr>\n<tr>\n<th style=\"width: 33.3333%;\" scope=\"row\">Row Heading 3<\/th>\n<td style=\"width: 33.3333%;\">Data<\/td>\n<td style=\"width: 33.3333%;\">Data<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2><a id=\"examples\"><\/a>Examples<\/h2>\n<div role=\"tablist\" class=\"panel-group yourcustomclass oscitas-bootstrap-container\" id=\"unc-accordion-0\">\n\n<div class=\"panel panel-default oscitas-bootstrap-container\">\n\n    <div id=\"panel-heading-details-0-0\" class=\"panel-heading oscitas-bootstrap-container\" role=\"tab\">\n\n        <h3 class=\"panel-title oscitas-bootstrap-container\">\n\n            <button class=\"accordion-toggle oscitas-bootstrap-container collapsed\" \n                id = \"button-details-0-0\"\n                data-toggle=\"collapse\"\n                data-parent=\"#unc-accordion-0\"    \n                aria-controls=\"#details-0-0\"  \n                aria-expanded=\"false\" \n                href=\"#details-0-0\">\n                Table With Column and Row Headers            <\/button>\n\n        <\/h3>\n\n    <\/div>\n\n    <div id=\"details-0-0\" class=\"panel-collapse collapse  oscitas-bootstrap-container\">\n\n        <div class=\"panel-body oscitas-bootstrap-container\">\n<table class=\"table table-bordered table-condensed table-striped\">\n<caption>Color Names in Multiple Languages<\/caption>\n<tbody>\n<tr class=\"headers\">\n<th scope=\"col\">Color<\/th>\n<th scope=\"col\">French<\/th>\n<th scope=\"col\">German<\/th>\n<th scope=\"col\">Italian<\/th>\n<th scope=\"col\">Portuguese<\/th>\n<th scope=\"col\">Spanish<\/th>\n<\/tr>\n<tr>\n<th scope=\"row\">Red<\/th>\n<td>rouge<\/td>\n<td>rot<\/td>\n<td>rosso<\/td>\n<td>vermelho<\/td>\n<td>rojo<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Orange<\/th>\n<td>orange<\/td>\n<td>orange<\/td>\n<td>arancione<\/td>\n<td>laranja<\/td>\n<td>anaranjado<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Yellow<\/th>\n<td>jaune<\/td>\n<td>gelb<\/td>\n<td>giallo<\/td>\n<td>amarelo<\/td>\n<td>amarillo<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Green<\/th>\n<td>vert<\/td>\n<td>gr\u00fcn<\/td>\n<td>verde<\/td>\n<td>verde<\/td>\n<td>verde<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Blue<\/th>\n<td>bleu<\/td>\n<td>blau<\/td>\n<td>blu<\/td>\n<td>azul<\/td>\n<td>azul<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Purple<\/th>\n<td>pourpre<\/td>\n<td>lila<\/td>\n<td>porpora<\/td>\n<td>roxo<\/td>\n<td>morado<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n\n    <\/div>\n        \n<\/div>\n\n<div class=\"panel panel-default oscitas-bootstrap-container\">\n\n    <div id=\"panel-heading-details-0-1\" class=\"panel-heading oscitas-bootstrap-container\" role=\"tab\">\n\n        <h3 class=\"panel-title oscitas-bootstrap-container\">\n\n            <button class=\"accordion-toggle oscitas-bootstrap-container collapsed\" \n                id = \"button-details-0-1\"\n                data-toggle=\"collapse\"\n                data-parent=\"#unc-accordion-0\"    \n                aria-controls=\"#details-0-1\"  \n                aria-expanded=\"false\" \n                href=\"#details-0-1\">\n                Table With a Header and a Caption            <\/button>\n\n        <\/h3>\n\n    <\/div>\n\n    <div id=\"details-0-1\" class=\"panel-collapse collapse  oscitas-bootstrap-container\">\n\n        <div class=\"panel-body oscitas-bootstrap-container\">\n<h4>April Cafeteria Menu (Header)<\/h4>\n<div class=\"row  oscitas-bootstrap-container\">\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-12 oscitas-bootstrap-container\">\n<table class=\"table table-bordered table-condensed table-striped\">\n<caption>Menu For April 10th through 14th (Caption)<\/caption>\n<tbody>\n<tr>\n<th scope=\"col\">Day<\/th>\n<th scope=\"col\">Lunch<\/th>\n<th scope=\"col\">Dinner<\/th>\n<\/tr>\n<tr>\n<th scope=\"row\">Monday<\/th>\n<td style=\"width: 33.3333%;\">Soup and Salad<\/td>\n<td style=\"width: 33.3333%;\">Meatloaf<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Tuesday<\/th>\n<td style=\"width: 33.3333%;\">Tacos<\/td>\n<td style=\"width: 33.3333%;\">Steak<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Wednesday<\/th>\n<td style=\"width: 33.3333%;\">Sandwiches<\/td>\n<td style=\"width: 33.3333%;\">Chicken<\/td>\n<\/tr>\n<tr>\n<th>Thursday<\/th>\n<td style=\"width: 33.3333%;\">Curry<\/td>\n<td style=\"width: 33.3333%;\">Roast Beef<\/td>\n<\/tr>\n<tr>\n<th>Friday<\/th>\n<td style=\"width: 33.3333%;\">Burgers<\/td>\n<td style=\"width: 33.3333%;\">Pizza<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-12 oscitas-bootstrap-container\">\n<table class=\"table table-bordered table-condensed table-striped\">\n<caption>Menu For April 17th through 21st (Caption)<\/caption>\n<tbody>\n<tr>\n<th scope=\"col\">Day<\/th>\n<th scope=\"col\">Lunch<\/th>\n<th scope=\"col\">Dinner<\/th>\n<\/tr>\n<tr>\n<th scope=\"row\">Monday<\/th>\n<td style=\"width: 33.3333%;\">Pizza<\/td>\n<td style=\"width: 33.3333%;\">Curry<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Tuesday<\/th>\n<td style=\"width: 33.3333%;\">Roast Beef<\/td>\n<td style=\"width: 33.3333%;\">Sandwiches<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Wednesday<\/th>\n<td style=\"width: 33.3333%;\">Steak<\/td>\n<td style=\"width: 33.3333%;\">Burgers<\/td>\n<\/tr>\n<tr>\n<th>Thursday<\/th>\n<td style=\"width: 33.3333%;\">Meatloaf<\/td>\n<td style=\"width: 33.3333%;\">Tacos<\/td>\n<\/tr>\n<tr>\n<th>Friday<\/th>\n<td style=\"width: 33.3333%;\">Chicken<\/td>\n<td style=\"width: 33.3333%;\">Soup and Salad<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n\n    <\/div>\n        \n<\/div>\n\n<div class=\"panel panel-default oscitas-bootstrap-container\">\n\n    <div id=\"panel-heading-details-0-2\" class=\"panel-heading oscitas-bootstrap-container\" role=\"tab\">\n\n        <h3 class=\"panel-title oscitas-bootstrap-container\">\n\n            <button class=\"accordion-toggle oscitas-bootstrap-container collapsed\" \n                id = \"button-details-0-2\"\n                data-toggle=\"collapse\"\n                data-parent=\"#unc-accordion-0\"    \n                aria-controls=\"#details-0-2\"  \n                aria-expanded=\"false\" \n                href=\"#details-0-2\">\n                Inaccessible Table - Example 1            <\/button>\n\n        <\/h3>\n\n    <\/div>\n\n    <div id=\"details-0-2\" class=\"panel-collapse collapse  oscitas-bootstrap-container\">\n\n        <div class=\"panel-body oscitas-bootstrap-container\">\n<h3>The table below is not accessible because:<\/h3>\n<ul class=\"condensed\">\n<li>There is no table caption or preceding heading to describe what the table represents.<\/li>\n<li>Column and row headers are not identified \u2014 they\u2019ve only been visually styled as bold text.<\/li>\n<li>Contains empty cells<\/li>\n<li>Uses merged cells<\/li>\n<li>Complex structure makes it hard for screen readers to interpret relationships<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<table class=\"table table-striped table-bordered table-striped\">\n<thead>\n<tr>\n<td><strong>Assignment<\/strong><\/td>\n<td><strong>Point Value<\/strong><\/td>\n<td colspan=\"2\"><strong>Due Date<\/strong><\/td>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"text-align: center;\" colspan=\"4\"><strong>TESTS<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Test 1<\/td>\n<td>200 points<\/td>\n<td colspan=\"2\">February 2<\/td>\n<\/tr>\n<tr>\n<td>Test 2<\/td>\n<td>200 points<\/td>\n<td colspan=\"2\">February 28<\/td>\n<\/tr>\n<tr>\n<td>Final<\/td>\n<td>25% of grade<\/td>\n<td colspan=\"2\">April 10<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center;\" colspan=\"4\"><strong>PROJECTS<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Project 1<\/td>\n<td>100 points<\/td>\n<td colspan=\"2\">January 25<\/td>\n<\/tr>\n<tr>\n<td>Project 2<\/td>\n<td>150 points<\/td>\n<td colspan=\"2\">February 22<\/td>\n<\/tr>\n<tr>\n<td>Group Project<\/td>\n<td>50 points<\/td>\n<td>Draft:<\/td>\n<td>March 20<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>100 points<\/td>\n<td>Final:<\/td>\n<td>April 5<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Data for demonstration purposes only.<\/p>\n<h3>How to Make the Table Accessible<\/h3>\n<p>Below are two ways to make the example above accessible and user-friendly:<\/p>\n<ol>\n<li>Option 1 \u2013 Split the complex table into two simpler tables (one for tests, one for projects).<\/li>\n<li>Option 2 \u2013 Rearrange the data into a single chronological table.<\/li>\n<\/ol>\n<p>Both examples:<\/p>\n<ul>\n<li>Have clear column and row headers (&lt;th&gt; elements)<\/li>\n<li>Use the scope attribute to associate headers with data<\/li>\n<li>Avoid empty or merged cells<\/li>\n<li>Include a caption describing the purpose of the table<\/li>\n<\/ul>\n<div class=\"row  oscitas-bootstrap-container\">\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-12 oscitas-bootstrap-container\">\n<h4>Option 1<\/h4>\n<table class=\"table table-condensed table-bordered table-striped\">\n<caption>Test Dates<\/caption>\n<thead>\n<tr>\n<th scope=\"col\">Test<\/th>\n<th scope=\"col\">Point Value<\/th>\n<th colspan=\"2\" scope=\"col\">Due Date<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<th scope=\"row\">Test 1<\/th>\n<td>200 points<\/td>\n<td colspan=\"2\">February 2<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Test 2<\/th>\n<td>200 points<\/td>\n<td colspan=\"2\">February 28<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Final<\/th>\n<td>25% of grade<\/td>\n<td colspan=\"2\">April 10<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table class=\"table table-condensed table-bordered table-striped\">\n<caption>Project Due Dates<\/caption>\n<thead>\n<tr>\n<th scope=\"col\">Assignment<\/th>\n<th scope=\"col\">Point Value<\/th>\n<th colspan=\"2\" scope=\"col\">Due Date<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<th scope=\"row\">Project 1<\/th>\n<td>100 points<\/td>\n<td colspan=\"2\">January 25<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Project 2<\/th>\n<td>150 points<\/td>\n<td colspan=\"2\">February 22<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Group Project (Draft)<\/th>\n<td>50 points<\/td>\n<td colspan=\"2\">March 20<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Group Project (Final)<\/th>\n<td>100 points<\/td>\n<td colspan=\"2\">April 5<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-12 oscitas-bootstrap-container\">\n<h4>Options 2<\/h4>\n<table class=\"table table-condensed table-bordered table-striped\">\n<caption>Dates For Class Projects and Tests<\/caption>\n<thead>\n<tr>\n<th scope=\"col\">Assignment<\/th>\n<th scope=\"col\">Point Value<\/th>\n<th scope=\"col\">Due Date<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<th scope=\"row\">Project 1<\/th>\n<td>100 points<\/td>\n<td>January 25<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Test 1<\/th>\n<td>100 points<\/td>\n<td>February 2<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Project 2<\/th>\n<td>150 points<\/td>\n<td>February 22<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Test 2<\/th>\n<td>100 points<\/td>\n<td>February 28<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Group Project (Draft)<\/th>\n<td>50 points<\/td>\n<td>March 20<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Group Project (Final)<\/th>\n<td>100 points<\/td>\n<td>April 5<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Final<\/th>\n<td>25% of grade<\/td>\n<td>April 10<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>Data for demonstration purposes only.<\/p>\n<\/div>\n\n    <\/div>\n        \n<\/div>\n\n<div class=\"panel panel-default oscitas-bootstrap-container\">\n\n    <div id=\"panel-heading-details-0-3\" class=\"panel-heading oscitas-bootstrap-container\" role=\"tab\">\n\n        <h3 class=\"panel-title oscitas-bootstrap-container\">\n\n            <button class=\"accordion-toggle oscitas-bootstrap-container collapsed\" \n                id = \"button-details-0-3\"\n                data-toggle=\"collapse\"\n                data-parent=\"#unc-accordion-0\"    \n                aria-controls=\"#details-0-3\"  \n                aria-expanded=\"false\" \n                href=\"#details-0-3\">\n                Inaccessible Table - Example 2            <\/button>\n\n        <\/h3>\n\n    <\/div>\n\n    <div id=\"details-0-3\" class=\"panel-collapse collapse  oscitas-bootstrap-container\">\n\n        <div class=\"panel-body oscitas-bootstrap-container\">\n<p>Below is another example demonstrating how a complex table can be broken into two simple and accessible tables.<\/p>\n<table class=\"table table-bordered\">\n<caption>5K Contestants<\/caption>\n<thead>\n<tr role=\"row\" aria-rowindex=\"1\">\n<th role=\"rowheader\" scope=\"row\" data-celllook=\"0\">Type of Race<\/th>\n<th role=\"columnheader\" scope=\"col\" data-celllook=\"0\">Name<\/th>\n<th role=\"columnheader\" scope=\"col\" data-celllook=\"0\">Age<\/th>\n<th role=\"columnheader\" scope=\"col\" data-celllook=\"0\">Hometown<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr role=\"row\" aria-rowindex=\"2\">\n<td role=\"rowheader\" colspan=\"1\" rowspan=\"2\" data-celllook=\"0\">Teen Race<\/td>\n<td data-celllook=\"0\">Ahmed<\/td>\n<td data-celllook=\"0\">16<\/td>\n<td data-celllook=\"0\">Guilderland<\/td>\n<\/tr>\n<tr role=\"row\" aria-rowindex=\"3\">\n<td data-celllook=\"0\">Jenni<\/td>\n<td data-celllook=\"0\">14<\/td>\n<td data-celllook=\"0\">Troy<\/td>\n<\/tr>\n<tr role=\"row\" aria-rowindex=\"4\">\n<td role=\"rowheader\" colspan=\"1\" rowspan=\"2\" data-celllook=\"0\">Adult Race<\/td>\n<td data-celllook=\"0\">Paula<\/td>\n<td data-celllook=\"0\">57<\/td>\n<td data-celllook=\"0\">Saratoga<\/td>\n<\/tr>\n<tr role=\"row\" aria-rowindex=\"5\">\n<td data-celllook=\"0\">John<\/td>\n<td data-celllook=\"0\">42<\/td>\n<td data-celllook=\"0\">Albany<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<table class=\"table table-bordered\">\n<caption>Teen 5K Contestants<\/caption>\n<thead>\n<tr>\n<th scope=\"col\">Name<\/th>\n<th scope=\"col\">Age<\/th>\n<th scope=\"col\">Hometown<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Ahmed<\/td>\n<td>16<\/td>\n<td>Guilderland<\/td>\n<\/tr>\n<tr>\n<td>Jenni<\/td>\n<td>14<\/td>\n<td>Troy<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table class=\"table table-bordered\">\n<caption>Adult 5K Contestants<\/caption>\n<thead>\n<tr>\n<th scope=\"col\">Name<\/th>\n<th scope=\"col\">Age<\/th>\n<th scope=\"col\">Hometown<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>John<\/td>\n<td>42<\/td>\n<td>Albany<\/td>\n<\/tr>\n<tr>\n<td>Paula<\/td>\n<td>57<\/td>\n<td>Saratoga<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Data for demonstration purposes only.<\/p>\n<\/div>\n\n    <\/div>\n        \n<\/div>\n<\/div>\n<p>Now that you understand how to create an accessible table, visit the <strong><a href=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/tables\/table-styles\/\">Table Styles<\/a><\/strong> documentation to learn how to apply styling options.<\/p>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2><a id=\"remove-formatting\"><\/a>Removing Unwanted Table Formatting<\/h2>\n<p>When you create a table, the editor often adds unwanted formatting such as specified table or column widths. These styles can cause tables to look uneven or behave poorly on smaller screens.<\/p>\n<h3>How To Fix<\/h3>\n<ol>\n<li>Place your cursor somewhere inside the table.<\/li>\n<li>In the editor, click on the <strong>Format<\/strong> menu and select <strong>Remove table styling<\/strong>.<br \/>\n<a href=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/10\/remove-table-styling.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14578\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/10\/remove-table-styling.png\" alt=\"Screenshot showing the 'remove table styling' option in the WordPress classic editor.\" width=\"350\" height=\"225\" srcset=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/10\/remove-table-styling.png 692w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/10\/remove-table-styling-300x193.png 300w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/10\/remove-table-styling-600x386.png 600w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/10\/remove-table-styling-560x360.png 560w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><\/a><\/li>\n<\/ol>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2><a id=\"videos\"><\/a>Video Tutorials<\/h2>\n<div class=\"row  oscitas-bootstrap-container\">\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n<div class=\"video-container\"><iframe loading=\"lazy\" width=\"560\" height=\"349\" src=\"\/\/www.youtube.com\/embed\/npto50RJpDc?html5=1\" title=\"\" frameborder=\"0\" allowfullscreen><\/iframe><\/div>\n<h3 style=\"text-align: center;\">Designing Accessible Tables<\/h3>\n<p style=\"text-align: center;\">Learn how to make the data tables more accessible via editing the html.<br \/>\n4 min. 27 sec.<\/p>\n<\/div>\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n<div class=\"video-container\"><iframe loading=\"lazy\" width=\"560\" height=\"349\" src=\"\/\/www.youtube.com\/embed\/ACmYzyN0b3U?html5=1\" title=\"\" frameborder=\"0\" allowfullscreen><\/iframe><\/div>\n<h3 style=\"text-align: center;\">Screen Reader Demo<\/h3>\n<p style=\"text-align: center;\">See how screen readers navigate through accessible and inaccessible tables.<br \/>\n3 min. 10 sec.<\/p>\n<\/div>\n<\/div>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2><a id=\"test\"><\/a>Test for Accessibility<\/h2>\n<p>Use\u00a0<a href=\"https:\/\/www.med.unc.edu\/webguide\/accessibility\/siteimprove\/\">SiteImprove<\/a> or <a href=\"https:\/\/wave.webaim.org\/extension\/\">WAVE<\/a> to check a table\u2019s accessibility.<\/p>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2><a id=\"resources\"><\/a>Resources<\/h2>\n<ul>\n<li>Applicable WCAG Guidelines\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/info-and-relationships\">WCAG 1.3.1<\/a> &#8211;\u00a0Info and Relationships<\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/meaningful-sequence\">WCAG 1.3.2<\/a> &#8211; Meaningful Sequence<\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/keyboard\">WCAG 2.1.1<\/a> &#8211; Keyboard Accessible<\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/headings-and-labels.html\">WCAG 2.4.6<\/a> &#8211; Headings and Labels<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/webaim.org\/techniques\/tables\">WebAIM: Creating Accessible Tables<\/a><\/li>\n<li><a title=\"Opens in new tab.\" href=\"https:\/\/www.w3.org\/WAI\/tutorials\/tables\/\">W3C Tables Tutorial<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tables should only be used to present tabular data (rows and columns of related information). They should not be used for layout or visual formatting, as this creates accessibility barriers and can cause issues on mobile devices. Consider presenting information without a table. If the same information can be presented using headings and lists, this &hellip; <a href=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/tables\/\" aria-label=\"Read more about Tables\">Read more<\/a><\/p>\n","protected":false},"author":3206,"featured_media":0,"parent":2212,"menu_order":10,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"layout":"","cellInformation":"","apiCallInformation":"","footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-10481","page","type-page","status-publish","hentry","odd"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Tables - Web Guide<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/tables\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tables - Web Guide\" \/>\n<meta property=\"og:description\" content=\"Tables should only be used to present tabular data (rows and columns of related information). They should not be used for layout or visual formatting, as this creates accessibility barriers and can cause issues on mobile devices. Consider presenting information without a table. If the same information can be presented using headings and lists, this &hellip; Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/tables\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Guide\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-02T16:59:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/10\/editor-table-options.gif\" \/>\n\t<meta property=\"og:image:width\" content=\"587\" \/>\n\t<meta property=\"og:image:height\" content=\"115\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/tables\/\",\"url\":\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/tables\/\",\"name\":\"Tables - Web Guide\",\"isPartOf\":{\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/tables\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/tables\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/10\/editor-table-options.gif\",\"datePublished\":\"2021-01-19T19:36:56+00:00\",\"dateModified\":\"2026-04-02T16:59:53+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/tables\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/tables\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/tables\/#primaryimage\",\"url\":\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/10\/editor-table-options.gif\",\"contentUrl\":\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/10\/editor-table-options.gif\",\"width\":587,\"height\":115,\"caption\":\"Screenshot of the WordPress editor highlighting the table options.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/tables\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.med.unc.edu\/webguide\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"User Guide\",\"item\":\"https:\/\/www.med.unc.edu\/webguide\/userguide\/ughome\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Styling Content\",\"item\":\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Tables\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/#website\",\"url\":\"https:\/\/www.med.unc.edu\/webguide\/\",\"name\":\"Web Guide\",\"description\":\"School of Medicine IT\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.med.unc.edu\/webguide\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tables - Web Guide","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/tables\/","og_locale":"en_US","og_type":"article","og_title":"Tables - Web Guide","og_description":"Tables should only be used to present tabular data (rows and columns of related information). They should not be used for layout or visual formatting, as this creates accessibility barriers and can cause issues on mobile devices. Consider presenting information without a table. If the same information can be presented using headings and lists, this &hellip; Read more","og_url":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/tables\/","og_site_name":"Web Guide","article_modified_time":"2026-04-02T16:59:53+00:00","og_image":[{"width":587,"height":115,"url":"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/10\/editor-table-options.gif","type":"image\/gif"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/tables\/","url":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/tables\/","name":"Tables - Web Guide","isPartOf":{"@id":"https:\/\/www.med.unc.edu\/webguide\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/tables\/#primaryimage"},"image":{"@id":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/tables\/#primaryimage"},"thumbnailUrl":"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/10\/editor-table-options.gif","datePublished":"2021-01-19T19:36:56+00:00","dateModified":"2026-04-02T16:59:53+00:00","breadcrumb":{"@id":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/tables\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/tables\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/tables\/#primaryimage","url":"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/10\/editor-table-options.gif","contentUrl":"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/10\/editor-table-options.gif","width":587,"height":115,"caption":"Screenshot of the WordPress editor highlighting the table options."},{"@type":"BreadcrumbList","@id":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/tables\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.med.unc.edu\/webguide\/"},{"@type":"ListItem","position":2,"name":"User Guide","item":"https:\/\/www.med.unc.edu\/webguide\/userguide\/ughome\/"},{"@type":"ListItem","position":3,"name":"Styling Content","item":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/"},{"@type":"ListItem","position":4,"name":"Tables"}]},{"@type":"WebSite","@id":"https:\/\/www.med.unc.edu\/webguide\/#website","url":"https:\/\/www.med.unc.edu\/webguide\/","name":"Web Guide","description":"School of Medicine IT","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.med.unc.edu\/webguide\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links_to":[],"_links_to_target":[],"_links":{"self":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/10481","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/users\/3206"}],"replies":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/comments?post=10481"}],"version-history":[{"count":50,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/10481\/revisions"}],"predecessor-version":[{"id":15652,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/10481\/revisions\/15652"}],"up":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/2212"}],"wp:attachment":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/media?parent=10481"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}