{"id":684,"date":"2020-01-02T19:51:27","date_gmt":"2020-01-03T00:51:27","guid":{"rendered":"http:\/\/newmediaproduction.mynmi.net\/?page_id=684"},"modified":"2022-07-11T21:40:46","modified_gmt":"2022-07-11T21:40:46","slug":"html-tables","status":"publish","type":"page","link":"https:\/\/nmi.cool\/web\/html-tables\/","title":{"rendered":"HTML Tables"},"content":{"rendered":"\n
\"\"\/
Photo by Andrew Barrowman<\/a>.<\/figcaption><\/figure>\n\n\n\n

Building tables by hand? Pretty difficult. Creating tables with HTML? Easy peasy. <\/p>\n\n\n\n

First, create a new HTML file called tables.html and save it in your webdev folder. Within the <body> of that file, start your table with the\u2014you guessed it\u2014<table><\/strong> tag. Chances are, Visual Studio Code will finish writing the table tag (<\/table<\/strong>) for you. <\/p>\n\n\n\n

Between your table tags, it\u2019s time to add rows, denoted by <tr><\/strong> (table rows). Each cell in the table is written using a <td><\/strong> (table data) tag.  <\/p>\n\n\n\n

Type the following into your file:<\/p>\n\n\n\n

    <table>\n        <tr>\n            <td>A<\/td>\n            <td>B<\/td>\n            <td>C<\/td>\n            <td>D<\/td>\n        <\/tr>\n        <tr>\n            <td>A2<\/td>\n            <td>B2<\/td>\n            <td>C3<\/td>\n            <td>D4<\/td>\n        <\/tr>\n    <\/table> <\/pre>\n\n\n\n
Preview your file by saving it and opening it in Chrome.  <\/p>\n\n\n\n
Table heading<\/h2>\n\n\n\n
Wouldn\u2019t this table look better with a table heading? The <th><\/strong> element stands for table heading. The <th><\/strong> element is incredibly important, <\/strong>for a variety of reasons. It can be used to represent an empty cell (notice the first cell in the example). It also helps makes your tables more accessible\u2014both a legal and ethical requirement of websites. <\/p>\n\n\n\n
Often, you see the table heading (<th<\/strong>>) tag used with scope<\/strong>. Scope specifies whether the heading is for a column or row. See the following example of scope in use: <\/p>\n\n\n\n
 <table>\n        <tr>\n            <th><\/th>\n            <th scope=\"col\">FCC Lessons Completed<\/th>\n        <\/tr>\n        <tr>\n            <th scope=\"col\">Week 1:<\/th>\n            <td>14<\/td>\n        <\/tr>\n        <th scope=\"col\">Week 2:<\/th>\n        <td>14<\/td>\n    <\/table> <\/pre>\n\n\n\n
Try it out!<\/p>\n\n\n\n
Your turn! 
<\/strong>
A) Try to add Week 3, Week 4, and Week 5 to the table, keeping the same formatting. 
B) Practice creating your own HTML table. Your table can display any information you\u2019d like\u2014fictional or real. Get creative and gain some familiarity making a HTML table on your own. <\/p>\n\n\n\n
When you’re done, save your file and open it in Chrome to check it out. No need to upload it to the server unless you want the practice! <\/p>\n","protected":false},"excerpt":{"rendered":"
Building tables by hand? Pretty difficult. Creating tables with HTML? Easy peasy. First, create a new HTML file called tables.html and save it in your webdev folder. Within the <body> of that file, start your table with the\u2014you guessed it\u2014<table> tag. Chances are, Visual Studio Code will finish writing the table tag (<\/table) for you. … Continue reading HTML Tables<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-684","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/pages\/684","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/comments?post=684"}],"version-history":[{"count":2,"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/pages\/684\/revisions"}],"predecessor-version":[{"id":3730,"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/pages\/684\/revisions\/3730"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/media?parent=684"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}