{"id":14537,"date":"2025-10-08T10:54:59","date_gmt":"2025-10-08T14:54:59","guid":{"rendered":"https:\/\/www.med.unc.edu\/webguide\/?page_id=14537"},"modified":"2026-02-16T14:30:24","modified_gmt":"2026-02-16T19:30:24","slug":"table-styles","status":"publish","type":"page","link":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/tables\/table-styles\/","title":{"rendered":"Table Styles"},"content":{"rendered":"<h2>Covered in This Tutorial<\/h2>\n<ul class=\"condensed\">\n<li><a href=\"#add-styles\">How to Add Styles<\/a><\/li>\n<li><a href=\"#examples\">Style Examples<\/a><\/li>\n<li><a href=\"#headers\">Table Headers<\/a><\/li>\n<li><a href=\"#borders\">Table Borders<\/a><\/li>\n<li><a href=\"#alignment\">Content Alignment<\/a><\/li>\n<\/ul>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2><a id=\"add-styles\"><\/a>How to Add Styles<\/h2>\n<p>There are a variety of pre-built styles that you can apply to tables. These styles can be applied by adding one or more CSS classes to the &lt;table&gt; element in the HTML.<\/p>\n<ol>\n<li><strong>Save<\/strong> any changes you&#8217;ve made. This ensures that if you make a mistake when editing the html, you can use <strong><a href=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/news-events\/revisions-how-to-undo-changes\/\">Revisions<\/a><\/strong> to undo only the table style edits without losing other updates.<\/li>\n<li>Copy the class(es) from the examples provided below that you wish to apply to the table.<\/li>\n<li>Switch to the Code view:\n<ol>\n<li>In the editor, click on the <strong>Code<\/strong> tab to see the html version of the page.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14570\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/10\/visual-text-tab.png\" alt=\"Screenshot highlighting the Visual and Code tab in the WordPress classic editor.\" width=\"550\" height=\"89\" srcset=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/10\/visual-text-tab.png 748w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/10\/visual-text-tab-300x49.png 300w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/10\/visual-text-tab-600x97.png 600w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/10\/visual-text-tab-560x91.png 560w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/li>\n<li><strong>Tip<\/strong>: before switching to the code view, highlight the first piece of content inside the table. It will remain highlighted in Code view, making it easier to locate the <strong>&lt;table&gt;<\/strong> element.<\/li>\n<\/ol>\n<\/li>\n<li>Locate the <strong>&lt;table&gt;<\/strong> element:\n<ol>\n<li>It will appear just above your highlighted content.<\/li>\n<li>Example: &lt;table&gt; or &lt;table style=&#8221;width: 100%; border-collapse: collapse;&#8221;&gt;.<\/li>\n<\/ol>\n<\/li>\n<li>Modify the &lt;table&gt; element:\n<ol>\n<li>The table element may already have some styles applied such as <strong>&lt;table style=&#8221;width: 100%; border-collapse: collapse;&#8221;&gt;<\/strong>.<\/li>\n<li>Delete only the <strong>style=&#8221;&#8230;&#8221;<\/strong> portion so that just <strong>&lt;table&gt;<\/strong> remains.<\/li>\n<li>Add the class attribute <strong>&lt;table class=&#8221;&#8221;&gt;<\/strong>.<\/li>\n<li>Paste your copied class name(s) inside the quotes.\n<ol>\n<li>Other styles rely on the <strong>basic<\/strong> table style for their core formatting.<\/li>\n<li>Start with the basic table style, then layer on other styles like condensed, striped, bordered, or hover to customize the appearance.<\/li>\n<\/ol>\n<\/li>\n<li>The resulting html will look something like <strong>&lt;table class=&#8221;table&#8221;&gt;<\/strong>.<\/li>\n<li>To apply multiple classes, separate them with spaces (not commas). For example <strong>&lt;table class=&#8221;table table-condensed table-bordered table-striped&#8221;&gt;<\/strong><\/li>\n<\/ol>\n<\/li>\n<li>Switch back to the Visual editor:\n<ol>\n<li>Click on the <strong>Visual<\/strong> tab.<\/li>\n<li>Note: The styles will not display inside the editor, they will only appear on the published page.<\/li>\n<\/ol>\n<\/li>\n<li><strong>Save<\/strong> your changes.<\/li>\n<li>If something went wrong when applying styles, don\u2019t panic. Use <a href=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/news-events\/revisions-how-to-undo-changes\/\"><strong>Revisions<\/strong><\/a> to restore your last saved version and try again.<\/li>\n<\/ol>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2><a id=\"examples\"><\/a>Style Examples<\/h2>\n<p>Each example below shows which class names to use and how the table will appear on the published page. The <strong>basic table<\/strong> provides the table foundation. Combinations of other styles such as <strong>condensed<\/strong>, <strong>striped<\/strong>, <strong>bordered<\/strong>, or <strong>hover<\/strong> can be added to the basic table to achieve the desired look.<\/p>\n<h3>Basic Table<\/h3>\n<p>This table uses the following class: <strong>table<\/strong>.<\/p>\n<p>Resulting html: <code class=\"inline\">&lt;table class=\"table\"&gt;<\/code><\/p>\n<table class=\"table\">\n<caption>Menu For April 10th through 14th<\/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<p>&nbsp;<\/p>\n<h3>Condensed Table<\/h3>\n<p>This table uses the following classes: <strong>table<\/strong> and <strong>table-condensed<\/strong><\/p>\n<p>Resulting html: <code class=\"inline\">&lt;table class=\"table table-condensed\"&gt;<\/code><\/p>\n<table class=\"table table-condensed\">\n<caption>Menu For April 10th through 14th<\/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<p>&nbsp;<\/p>\n<h3>Hover Table<\/h3>\n<p>This table uses the following classes: <strong>table<\/strong> and <strong>table-hover<\/strong><\/p>\n<p>Resulting html: <code class=\"inline\">&lt;table class=\"table table-hover\"&gt;<\/code><\/p>\n<table class=\"table table-hover\">\n<caption>Menu For April 10th through 14th<\/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<p>&nbsp;<\/p>\n<h3>Striped Table<\/h3>\n<p>This table uses the following classes: <strong>table<\/strong> and <strong>table-striped<\/strong><\/p>\n<p>Resulting html: <code class=\"inline\">&lt;table class=\"table table-striped\"&gt;<\/code><\/p>\n<table class=\"table table-striped\">\n<caption>Menu For April 10th through 14th<\/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<p>&nbsp;<\/p>\n<h3>Combo Striped and Hover Table<\/h3>\n<p>This table uses the following classes: <strong>table<\/strong>, <strong>table-striped<\/strong> and <strong>table-hover<\/strong><\/p>\n<p>Resulting html: <code class=\"inline\">&lt;table class=\"table table-striped table-hover\"&gt;<\/code><\/p>\n<table class=\"table table-striped table-hover\">\n<caption>Menu For April 10th through 14th<\/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<p>&nbsp;<\/p>\n<h3>Bordered Table<\/h3>\n<p>This table uses the following classes: <strong>table<\/strong> and <strong>table-bordered<\/strong><\/p>\n<p>Resulting html: <code class=\"inline\">&lt;table class=\"table table-bordered\"&gt;<\/code><\/p>\n<table class=\"table table-bordered\">\n<caption>Menu For April 10th through 14th<\/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<p>&nbsp;<\/p>\n<h3>Combo Bordered and Hover Table<\/h3>\n<p>This table uses the following classes: <strong>table<\/strong>, <strong>table-bordered<\/strong> and <strong>table-hover<\/strong><\/p>\n<p>Resulting html: <code class=\"inline\">&lt;table class=\"table table-bordered table-hover\"&gt;<\/code><\/p>\n<table class=\"table table-bordered table-hover\">\n<caption>Menu For April 10th through 14th<\/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<p>&nbsp;<\/p>\n<h3>Combo Bordered and Striped Table<\/h3>\n<p>This table uses the following classes: <strong>table<\/strong>, <strong>table-bordered<\/strong> and <strong>table-striped<\/strong><\/p>\n<p>Resulting html: <code class=\"inline\">&lt;table class=\"table table-bordered table-striped\"&gt;<\/code><\/p>\n<table class=\"table table-bordered table-striped\">\n<caption>Menu For April 10th through 14th<\/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<p>&nbsp;<\/p>\n<h3>Combo Bordered, Striped and Condensed Table<\/h3>\n<p>This table uses the following classes: <strong>table<\/strong>, <strong>table-bordered<\/strong>, <strong>table-striped<\/strong> and <strong>table-condensed<\/strong>.<\/p>\n<p>Resulting html: <code class=\"inline\">&lt;table class=\"table table-bordered table-striped table-condensed\"&gt;<\/code><\/p>\n<table class=\"table table-bordered table-striped table-condensed\">\n<caption>Menu For April 10th through 14th<\/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<p>&nbsp;<\/p>\n<h3>Plain Table<\/h3>\n<p>This table uses the following class: <strong>plain<\/strong><\/p>\n<p>Resulting html: <code class=\"inline\">&lt;table class=\"plain\"&gt;<\/code><\/p>\n<table class=\"plain\">\n<caption>Menu For April 10th through 14th<\/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<p>&nbsp;<\/p>\n<h3>Responsive Table<\/h3>\n<p>A responsive table automatically adjusts to fit smaller screens, like tablets and phones. When there are too many columns to display at once, the table adds a horizontal scroll bar so visitors can swipe or scroll sideways to see all the content without it breaking or overflowing off the page.<\/p>\n<div class=\"table-responsive\">\n<table class=\"table\" style=\"width: 44.0104%; height: 92px;\">\n<thead>\n<tr style=\"height: 23px;\">\n<th style=\"height: 23px;\" scope=\"col\">#<\/th>\n<th style=\"height: 23px;\" scope=\"col\">Heading<\/th>\n<th style=\"height: 23px;\" scope=\"col\">Heading<\/th>\n<th style=\"height: 23px;\" scope=\"col\">Heading<\/th>\n<th style=\"height: 23px;\" scope=\"col\">Heading<\/th>\n<th style=\"height: 23px;\" scope=\"col\">Heading<\/th>\n<th style=\"height: 23px;\" scope=\"col\">Heading<\/th>\n<th style=\"height: 23px;\" scope=\"col\">Heading<\/th>\n<th style=\"height: 23px;\" scope=\"col\">Heading<\/th>\n<th style=\"height: 23px;\" scope=\"col\">Heading<\/th>\n<th style=\"height: 23px;\">Heading<\/th>\n<th style=\"height: 23px;\">Heading<\/th>\n<th style=\"height: 23px;\">Heading<\/th>\n<th style=\"height: 23px;\">Heading<\/th>\n<th style=\"height: 23px;\">Heading<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr style=\"height: 23px;\">\n<th style=\"height: 23px;\" scope=\"row\">1<\/th>\n<td style=\"height: 23px;\">Cell<\/td>\n<td style=\"height: 23px;\">Cell<\/td>\n<td style=\"height: 23px;\">Cell<\/td>\n<td style=\"height: 23px;\">Cell<\/td>\n<td style=\"height: 23px;\">Cell<\/td>\n<td style=\"height: 23px;\">Cell<\/td>\n<td style=\"height: 23px;\">Cell<\/td>\n<td style=\"height: 23px;\">Cell<\/td>\n<td style=\"height: 23px;\">Cell<\/td>\n<td style=\"height: 23px;\">Cell<\/td>\n<td style=\"height: 23px;\">Cell<\/td>\n<td style=\"height: 23px;\">Cell<\/td>\n<td style=\"height: 23px;\">Cell<\/td>\n<td style=\"height: 23px;\">Cell<\/td>\n<\/tr>\n<tr style=\"height: 23px;\">\n<th style=\"height: 23px;\" scope=\"row\">2<\/th>\n<td style=\"height: 23px;\">Cell<\/td>\n<td style=\"height: 23px;\">Cell<\/td>\n<td style=\"height: 23px;\">Cell<\/td>\n<td style=\"height: 23px;\">Cell<\/td>\n<td style=\"height: 23px;\">Cell<\/td>\n<td style=\"height: 23px;\">Cell<\/td>\n<td style=\"height: 23px;\">Cell<\/td>\n<td style=\"height: 23px;\">Cell<\/td>\n<td style=\"height: 23px;\">Cell<\/td>\n<td style=\"height: 23px;\">Cell<\/td>\n<td style=\"height: 23px;\">Cell<\/td>\n<td style=\"height: 23px;\">Cell<\/td>\n<td style=\"height: 23px;\">Cell<\/td>\n<td style=\"height: 23px;\">Cell<\/td>\n<\/tr>\n<tr style=\"height: 23px;\">\n<th style=\"height: 23px;\" scope=\"row\">3<\/th>\n<td style=\"height: 23px;\">Cell<\/td>\n<td style=\"height: 23px;\">Cell<\/td>\n<td style=\"height: 23px;\">Cell<\/td>\n<td style=\"height: 23px;\">Cell<\/td>\n<td style=\"height: 23px;\">Cell<\/td>\n<td style=\"height: 23px;\">Cell<\/td>\n<td style=\"height: 23px;\">Cell<\/td>\n<td style=\"height: 23px;\">Cell<\/td>\n<td style=\"height: 23px;\">Cell<\/td>\n<td style=\"height: 23px;\">Cell<\/td>\n<td style=\"height: 23px;\">Cell<\/td>\n<td style=\"height: 23px;\">Cell<\/td>\n<td style=\"height: 23px;\">Cell<\/td>\n<td style=\"height: 23px;\">Cell<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>&nbsp;<\/p>\n<hr  style=\"margin:50px 0\"class=\" rule-thin osc-rule\" \/>\n<h2 style=\"color: #333333;\"><a id=\"headers\"><\/a>Table Headers<\/h2>\n<p>You can apply color styles to table headers to help distinguish column and row headings and improve readability. Simply copy the desired table header class and assign it to your table using the same method described above.<\/p>\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<table class=\"table table-th-light-gray\">\n<caption>\n<h3>Light Gray Headers<\/h3>\n<\/caption>\n<tbody>\n<tr>\n<th scope=\"col\">Day<\/th>\n<th scope=\"col\">Link<\/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>Link<\/th>\n<td style=\"width: 33.3333%;\">Burgers<\/td>\n<td style=\"width: 33.3333%;\">Pizza<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Class:\u00a0<strong>table-th-light-gray<\/strong><\/p>\n<p>HTML \/ all classes used on this table: <code class=\"inline\">&lt;table class=\"table table-th-light-gray\"&gt;<\/code><\/p>\n<\/div>\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n<table class=\"table table-striped table-th-light-blue\">\n<caption>\n<h3>Light Blue Headers<\/h3>\n<\/caption>\n<tbody>\n<tr>\n<th scope=\"col\">Link<\/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\">Link<\/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<p>Class:\u00a0<strong>table-th-light-blue<\/strong><\/p>\n<p>HTML\/ all classes used on this table:\u00a0<code class=\"inline\">&lt;table class=\"table table-striped table-th-light-blue\"&gt;<\/code><\/p>\n<\/div>\n<\/div>\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<table class=\"table table-hover table-th-medium-blue\">\n<caption>\n<h3>Medium Blue Headers<\/h3>\n<\/caption>\n<tbody>\n<tr>\n<th scope=\"col\">Day<\/th>\n<th scope=\"col\">Link<\/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>Link<\/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<p>Class:\u00a0<strong>table-th-medium-blue<\/strong><\/p>\n<p>HTML \/ all classes used on this table:\u00a0<code class=\"inline\">&lt;table class=\"table table-hover table-th-medium-blue\"&gt;<\/code><\/p>\n<\/div>\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n<table class=\"table table-bordered table-th-dark-blue\">\n<caption>\n<h3>Dark Blue Headers<\/h3>\n<\/caption>\n<tbody>\n<tr>\n<th scope=\"col\">Day<\/th>\n<th scope=\"col\">Lunch<\/th>\n<th scope=\"col\">Link<\/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>Link<\/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<p>Class:\u00a0<strong>table-th-dark-blue<\/strong><\/p>\n<p>HTML \/ all classes used on this table: <code class=\"inline\">&lt;table class=\"table table-bordered table-th-dark-blue\"&gt;<\/code><\/p>\n<\/div>\n<\/div>\n<h3>Thicker Underline for Table Headers<\/h3>\n<table class=\"table table-condensed\">\n<caption>This is an example of a accessible 3 row, 3 col table (this is the caption)<\/caption>\n<thead>\n<tr>\n<th scope=\"col\">Column Heading 1<\/th>\n<th scope=\"col\">Column Heading 2<\/th>\n<th scope=\"col\">Column Heading 3<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<th scope=\"row\">Row Heading 1<\/th>\n<td>Data<\/td>\n<td>Data<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Row Heading 2<\/th>\n<td>Data<\/td>\n<td>Data<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Row Heading 3<\/th>\n<td>Data<\/td>\n<td>Data<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>The table above uses the following classes: <code class=\"inline\">&lt;table class=\"table table-condensed\"&gt;<\/code>. However, these classes aren&#8217;t what style the thicker underline beneath the column headers.<\/p>\n<p>To display a thicker underline beneath your table\u2019s column headers, you&#8217;ll need to edit the html to group the header row inside a &lt;thead&gt; element. This improves visual separation between the header row and the table body.<\/p>\n<ul>\n<li>The &lt;thead&gt; should only contain column headers (&lt;th scope=&#8221;col&#8221;&gt;).<\/li>\n<li>Data rows should be placed inside &lt;tbody&gt;.<\/li>\n<\/ul>\n<h4>Example HTML<\/h4>\n<p>Click on either image for a larger view.<\/p>\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<p>HTML of a table that doesn&#8217;t use the &lt;thead&gt; element.<\/p>\n<p><span class=\"imgBorderMed\"><a href=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/02\/table-html-without-thead.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-15412 size-full\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/02\/table-html-without-thead.png\" alt=\"Screenshot of the html of a table that doesn't use the &lt;thead&gt; element, links to full size version of same image.\" width=\"793\" height=\"423\" srcset=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/02\/table-html-without-thead.png 793w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/02\/table-html-without-thead-300x160.png 300w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/02\/table-html-without-thead-768x410.png 768w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/02\/table-html-without-thead-600x320.png 600w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/02\/table-html-without-thead-560x299.png 560w\" sizes=\"auto, (max-width: 793px) 100vw, 793px\" \/><\/a><\/span><\/p>\n<\/div>\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n<p>HTML of a table that does use the &lt;thead&gt; element.<\/p>\n<p><span class=\"imgBorderMed\"><a href=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/02\/table-html-with-thead.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-15413 size-full\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/02\/table-html-with-thead.png\" alt=\"Screenshot of the html of a table that does use the &lt;thead&gt; element, links to the full size version of the same image.\" width=\"794\" height=\"479\" srcset=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/02\/table-html-with-thead.png 794w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/02\/table-html-with-thead-300x181.png 300w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/02\/table-html-with-thead-768x463.png 768w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/02\/table-html-with-thead-600x362.png 600w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2026\/02\/table-html-with-thead-560x338.png 560w\" sizes=\"auto, (max-width: 794px) 100vw, 794px\" \/><\/a><\/span><\/p>\n<\/div>\n<\/div>\n<hr  style=\"margin:50px 0\"class=\" rule-thin osc-rule\" \/>\n<h2 style=\"color: #333333;\"><a id=\"borders\"><\/a>Table Borders<\/h2>\n<h3>Black Borders<\/h3>\n<p>Assign the class: <strong>table-border-black<\/strong> to apply black borders and improve visual separation.<\/p>\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<table class=\"table table-th-light-gray\">\n<caption>\n<h3>Default Borders<\/h3>\n<\/caption>\n<tbody>\n<tr>\n<th scope=\"col\">Day<\/th>\n<th scope=\"col\">Link<\/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>Link<\/th>\n<td style=\"width: 33.3333%;\">Burgers<\/td>\n<td style=\"width: 33.3333%;\">Pizza<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>HTML:\u00a0<code class=\"inline\">&lt;table class=\"table table-th-light-gray\"&gt;<\/code><\/p>\n<\/div>\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n<table class=\"table table-th-light-gray table-border-black\">\n<caption>\n<h3>Black Borders<\/h3>\n<\/caption>\n<tbody>\n<tr>\n<th scope=\"col\">Day<\/th>\n<th scope=\"col\">Link<\/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>Link<\/th>\n<td style=\"width: 33.3333%;\">Burgers<\/td>\n<td style=\"width: 33.3333%;\">Pizza<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>HTML:\u00a0<code class=\"inline\">&lt;table class=\"table table-th-light-gray table-border-black\"&gt;<\/code><\/p>\n<\/div>\n<\/div>\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<table class=\"table table-bordered table-th-medium-blue\">\n<caption>\n<h3>Default Borders<\/h3>\n<\/caption>\n<tbody>\n<tr>\n<th scope=\"col\">Link<\/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\">Link<\/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<p>HTML:\u00a0<code class=\"inline\">&lt;table class=\"table table-bordered table-th-medium-blue\"&gt;<\/code><\/p>\n<\/div>\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n<table class=\"table table-bordered table-th-medium-blue table-border-black\">\n<caption>\n<h3>Black Borders<\/h3>\n<\/caption>\n<tbody>\n<tr>\n<th scope=\"col\">Link<\/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\">Link<\/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<p>HTML:\u00a0<code class=\"inline\">&lt;table class=\"table table-bordered table-th-medium-blue table-border-black\"&gt;<\/code><\/p>\n<\/div>\n<\/div>\n<hr  style=\"margin:50px 0\"class=\" rule-thin osc-rule\" \/>\n<h2><a id=\"alignment\"><\/a>Cell Alignment<\/h2>\n<p>By default, table cell content is aligned to the <strong>top<\/strong>. You can change the vertical alignment using the following classes:<\/p>\n<ul>\n<li><strong>table-align-middle<\/strong> &#8211; aligns cell content vertically in the middle<\/li>\n<li><strong>table-align-bottom<\/strong> &#8211; aligns cell content to the bottom<\/li>\n<\/ul>\n<p>Assign these classes to the table using the same method described above.<\/p>\n<table class=\"table table-bordered table-th-light-gray table-border-black table-align-middle\">\n<caption>\n<h3>Align Middle<\/h3>\n<\/caption>\n<tbody>\n<tr>\n<th scope=\"col\">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/th>\n<th scope=\"col\">Lorem ipsum<\/th>\n<th scope=\"col\">Lorem ipsum<\/th>\n<\/tr>\n<tr>\n<th scope=\"row\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mollis ultrices felis sit amet iaculis.<\/th>\n<td style=\"width: 33.3333%;\">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/td>\n<td style=\"width: 33.3333%;\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mollis ultrices felis sit amet iaculis. Nulla congue vulputate congue. Donec fermentum, justo eu laoreet placerat, neque quam pellentesque tortor, non lacinia odio mi ac nulla. Ut lacinia iaculis consequat.<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Lorem ipsum<\/th>\n<td style=\"width: 33.3333%;\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mollis ultrices felis sit amet iaculis. Nulla congue vulputate congue.<\/td>\n<td style=\"width: 33.3333%;\">Lorem ipsum<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/th>\n<td style=\"width: 33.3333%;\">Lorem ipsum<\/td>\n<td style=\"width: 33.3333%;\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mollis ultrices felis sit amet iaculis. Nulla congue vulputate congue.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Class:\u00a0<strong>table-align-middle<\/strong><\/p>\n<p>HTML:\u00a0<code class=\"inline\">&lt;table table-bordered table-th-light-gray table-border-black table-align-middle\"&gt;<\/code><\/p>\n<p>&nbsp;<\/p>\n<table class=\"table table-bordered table-th-light-gray table-border-black table-align-bottom\">\n<caption>\n<h3>Align Bottom<\/h3>\n<\/caption>\n<tbody>\n<tr>\n<th scope=\"col\">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/th>\n<th scope=\"col\">Lorem ipsum<\/th>\n<th scope=\"col\">Lorem ipsum<\/th>\n<\/tr>\n<tr>\n<th scope=\"row\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mollis ultrices felis sit amet iaculis.<\/th>\n<td style=\"width: 33.3333%;\">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/td>\n<td style=\"width: 33.3333%;\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mollis ultrices felis sit amet iaculis. Nulla congue vulputate congue. Donec fermentum, justo eu laoreet placerat, neque quam pellentesque tortor, non lacinia odio mi ac nulla. Ut lacinia iaculis consequat.<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Lorem ipsum<\/th>\n<td style=\"width: 33.3333%;\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mollis ultrices felis sit amet iaculis. Nulla congue vulputate congue.<\/td>\n<td style=\"width: 33.3333%;\">Lorem ipsum<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/th>\n<td style=\"width: 33.3333%;\">Lorem ipsum<\/td>\n<td style=\"width: 33.3333%;\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mollis ultrices felis sit amet iaculis. Nulla congue vulputate congue.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Class:\u00a0<strong>table-align-bottom<\/strong><\/p>\n<p>HTML:\u00a0<code class=\"inline\">&lt;table table-bordered table-th-light-gray table-border-black table-align-bottom\"&gt;<\/code><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Covered in This Tutorial How to Add Styles Style Examples Table Headers Table Borders Content Alignment How to Add Styles There are a variety of pre-built styles that you can apply to tables. These styles can be applied by adding one or more CSS classes to the &lt;table&gt; element in the HTML. Save any changes &hellip; <a href=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/tables\/table-styles\/\" aria-label=\"Read more about Table Styles\">Read more<\/a><\/p>\n","protected":false},"author":3206,"featured_media":0,"parent":10481,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"layout":"","cellInformation":"","apiCallInformation":"","footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-14537","page","type-page","status-publish","hentry","odd"],"acf":[],"_links_to":[],"_links_to_target":[],"_links":{"self":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/14537","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=14537"}],"version-history":[{"count":35,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/14537\/revisions"}],"predecessor-version":[{"id":15434,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/14537\/revisions\/15434"}],"up":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/10481"}],"wp:attachment":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/media?parent=14537"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}