{"id":215,"date":"2026-02-13T19:53:13","date_gmt":"2026-02-14T00:53:13","guid":{"rendered":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/?post_type=chapter&p=215"},"modified":"2026-02-18T13:40:14","modified_gmt":"2026-02-18T18:40:14","slug":"chapter-9-tables","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/chapter\/chapter-9-tables\/","title":{"raw":"Chapter 9 \u2022 Tables","rendered":"Chapter 9 \u2022 Tables"},"content":{"raw":"Tables consist of a series of rows and columns that are created with nested tags. The easiest way to get table information into Dreamweaver is to get the information in Excel or Numbers, export to comma-separated values (.csv), and import into Dreamweaver (File > Import > Tabular data).\r\n

Table Tags<\/h2>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
Table Tags<\/strong>\r\n<\/em><\/td>\r\n<\/tr>\r\n
Tag<\/em><\/td>\r\nExplanation<\/em><\/td>\r\nComments<\/em><\/td>\r\n<\/tr>\r\n
<table><\/td>\r\ntable tag<\/td>\r\n<\/td>\r\n<\/tr>\r\n
<tr><\/td>\r\ntable row<\/td>\r\nThe table must have at least one row to appear on the page.<\/td>\r\n<\/tr>\r\n
<td><\/td>\r\ntable data<\/td>\r\nCells\u2014the table must have at least one cell to show up. Note: There is no column tag; the columns are determined by cell order.<\/td>\r\n<\/tr>\r\n
<th><\/td>\r\ntable header<\/td>\r\ndefault style is bold and centered<\/td>\r\n<\/tr>\r\n
<thead><\/td>\r\nheader, top rows of table<\/td>\r\noptional tag<\/td>\r\n<\/tr>\r\n
<tbody><\/td>\r\nbody rows<\/td>\r\noptional tag<\/td>\r\n<\/tr>\r\n
<tfoot><\/td>\r\nfooter, bottom rows, of table<\/td>\r\noptional tag<\/td>\r\n<\/tr>\r\n
<td colspan=\"3\"><\/td>\r\nenables spanning columns<\/td>\r\ntag modifier to merge cells, e.g., in title<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n

Sample Table HTML<\/h2>\r\nThe following HTML code creates numbered rows and columns to illustrate the structure of a table.\r\n
<table>\r\n  <tr>\r\n    <th colspan=\"3\">Sample Table<\/th>\r\n  <\/tr>\r\n  <tr>\r\n    <th>Column 1<\/th>\r\n    <th>Column 2<\/th>\r\n    <th>Column 3<\/th>\r\n  <\/tr>\r\n  <tr>\r\n    <td>Row 1, Column 1<\/td>\r\n    <td>Row 1, Column 2<\/td>\r\n    <td>Row 1, Column 3<\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td>Row 2, Column 1<\/td>\r\n    <td>Row 2, Column 2<\/td>\r\n    <td>Row 2, Column 3<\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td>Row 3, Column 1<\/td>\r\n    <td>Row 3, Column 2<\/td>\r\n    <td>Row 3, Column 3<\/td>\r\n  <\/tr>\r\n<\/table><\/pre>\r\nThe above HTML renders as follows:\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
Sample Table<\/th>\r\n<\/tr>\r\n
Column 1<\/th>\r\nColumn 2<\/th>\r\nColumn 3<\/th>\r\n<\/tr>\r\n
Row 1, Column 1<\/td>\r\nRow 1, Column 2<\/td>\r\nRow 1, Column 3<\/td>\r\n<\/tr>\r\n
Row 2, Column 1<\/td>\r\nRow 2, Column 2<\/td>\r\nRow 2, Column 3<\/td>\r\n<\/tr>\r\n
Row 3, Column 1<\/td>\r\nRow 3, Column 2<\/td>\r\nRow 3, Column 3<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n
CSS for Tables<\/h2>\r\nThe default table style in most browsers is double borders between cells, cramped text within the cells, and Times Roman font. These default styles can all be modified to create a more visually pleasing and legible table.\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
CSS for Tables<\/strong><\/td>\r\n<\/tr>\r\n
style<\/em><\/td>\r\nexample<\/em><\/td>\r\n<\/tr>\r\n
center the table<\/td>\r\nmargin: 0 auto;<\/td>\r\n<\/tr>\r\n
place a border around the table<\/td>\r\nborder: 1px solid darkgray;<\/td>\r\n<\/tr>\r\n
place a drop-shadow under the table<\/td>\r\nbox-shadow: 2px 3px 6px darkgray;<\/td>\r\n<\/tr>\r\n
shade alternate rows<\/td>\r\ntd:nth-child(odd) {[styles go here]}; or nth-child(even)<\/td>\r\n<\/tr>\r\n
remove internal borders<\/td>\r\nborder-collapse: collapse;<\/td>\r\n<\/tr>\r\n
place an image as the background of the table<\/td>\r\nbackground: url(\"image.jpg\"); \/* be careful of text contrast *\/<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n \r\n\r\n[caption id=\"attachment_237\" align=\"aligncenter\" width=\"384\"]\"Default<\/a> Default table with double borders and crowded Times Roman text[\/caption]\r\n\r\n[caption id=\"attachment_238\" align=\"aligncenter\" width=\"512\"]\"Redesigned<\/a> Redesigned table with increased padding around text, even rows selected with \u201cnth-child\u201d selector and shaded \u201cGainsboro\u201d (light gray), and text set in the screen font Georgia.[\/caption]\r\n
Reference Documents<\/h2>\r\nSample tables<\/a>\r\n\r\nDemo document<\/a>","rendered":"
Tables consist of a series of rows and columns that are created with nested tags. The easiest way to get table information into Dreamweaver is to get the information in Excel or Numbers, export to comma-separated values (.csv), and import into Dreamweaver (File > Import > Tabular data).<\/p>\n
Table Tags<\/h2>\n\n\n\n\n\n\n\n\n\n\n\n\n
Table Tags<\/strong>
\n<\/em><\/td>\n<\/tr>\n
Tag<\/em><\/td>\nExplanation<\/em><\/td>\nComments<\/em><\/td>\n<\/tr>\n
<table><\/td>\ntable tag<\/td>\n<\/td>\n<\/tr>\n
<tr><\/td>\ntable row<\/td>\nThe table must have at least one row to appear on the page.<\/td>\n<\/tr>\n
<td><\/td>\ntable data<\/td>\nCells\u2014the table must have at least one cell to show up. Note: There is no column tag; the columns are determined by cell order.<\/td>\n<\/tr>\n
<th><\/td>\ntable header<\/td>\ndefault style is bold and centered<\/td>\n<\/tr>\n
<thead><\/td>\nheader, top rows of table<\/td>\noptional tag<\/td>\n<\/tr>\n
<tbody><\/td>\nbody rows<\/td>\noptional tag<\/td>\n<\/tr>\n
<tfoot><\/td>\nfooter, bottom rows, of table<\/td>\noptional tag<\/td>\n<\/tr>\n
<td colspan=”3″><\/td>\nenables spanning columns<\/td>\ntag modifier to merge cells, e.g., in title<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Sample Table HTML<\/h2>\n
The following HTML code creates numbered rows and columns to illustrate the structure of a table.<\/p>\n
<table>\r\n  <tr>\r\n    <th colspan=\"3\">Sample Table<\/th>\r\n  <\/tr>\r\n  <tr>\r\n    <th>Column 1<\/th>\r\n    <th>Column 2<\/th>\r\n    <th>Column 3<\/th>\r\n  <\/tr>\r\n  <tr>\r\n    <td>Row 1, Column 1<\/td>\r\n    <td>Row 1, Column 2<\/td>\r\n    <td>Row 1, Column 3<\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td>Row 2, Column 1<\/td>\r\n    <td>Row 2, Column 2<\/td>\r\n    <td>Row 2, Column 3<\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td>Row 3, Column 1<\/td>\r\n    <td>Row 3, Column 2<\/td>\r\n    <td>Row 3, Column 3<\/td>\r\n  <\/tr>\r\n<\/table><\/pre>\n
The above HTML renders as follows:<\/p>\n\n\n\n\n\n\n\n
Sample Table<\/th>\n<\/tr>\n
Column 1<\/th>\nColumn 2<\/th>\nColumn 3<\/th>\n<\/tr>\n
Row 1, Column 1<\/td>\nRow 1, Column 2<\/td>\nRow 1, Column 3<\/td>\n<\/tr>\n
Row 2, Column 1<\/td>\nRow 2, Column 2<\/td>\nRow 2, Column 3<\/td>\n<\/tr>\n
Row 3, Column 1<\/td>\nRow 3, Column 2<\/td>\nRow 3, Column 3<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
CSS for Tables<\/h2>\n
The default table style in most browsers is double borders between cells, cramped text within the cells, and Times Roman font. These default styles can all be modified to create a more visually pleasing and legible table.<\/p>\n\n\n\n\n\n\n\n\n\n\n
CSS for Tables<\/strong><\/td>\n<\/tr>\n
style<\/em><\/td>\nexample<\/em><\/td>\n<\/tr>\n
center the table<\/td>\nmargin: 0 auto;<\/td>\n<\/tr>\n
place a border around the table<\/td>\nborder: 1px solid darkgray;<\/td>\n<\/tr>\n
place a drop-shadow under the table<\/td>\nbox-shadow: 2px 3px 6px darkgray;<\/td>\n<\/tr>\n
shade alternate rows<\/td>\ntd:nth-child(odd) {[styles go here]}; or nth-child(even)<\/td>\n<\/tr>\n
remove internal borders<\/td>\nborder-collapse: collapse;<\/td>\n<\/tr>\n
place an image as the background of the table<\/td>\nbackground: url(“image.jpg”); \/* be careful of text contrast *\/<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
 <\/p>\n
\"Default<\/a>
Default table with double borders and crowded Times Roman text<\/figcaption><\/figure>\n
\"Redesigned<\/a>
Redesigned table with increased padding around text, even rows selected with \u201cnth-child\u201d selector and shaded \u201cGainsboro\u201d (light gray), and text set in the screen font Georgia.<\/figcaption><\/figure>\n
Reference Documents<\/h2>\n
Sample tables<\/a><\/p>\n
Demo document<\/a><\/p>\n","protected":false},"author":6,"menu_order":9,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-215","chapter","type-chapter","status-publish","hentry"],"part":3,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/chapters\/215","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/wp\/v2\/users\/6"}],"version-history":[{"count":12,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/chapters\/215\/revisions"}],"predecessor-version":[{"id":242,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/chapters\/215\/revisions\/242"}],"part":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/parts\/3"}],"metadata":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/chapters\/215\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/wp\/v2\/media?parent=215"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/chapter-type?post=215"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/wp\/v2\/contributor?post=215"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/wp\/v2\/license?post=215"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}