create account

My Daily learning - How to Code Day 8 of HTML: Tables by nolimit909

View this thread on: hive.blogpeakd.comecency.com
· @nolimit909 ·
$24.82
My Daily learning - How to Code Day 8 of HTML: Tables
Good Evening everyone,

This is the continuation of prep for my honorable discharge from my Military Service. I'm going back to school for computer science. For my prep @richatvns is mentoring me in Calculus and the field of computer science. I'm taking online video classes on Calculus 3, learning HTML, then CSS, followed by Javascript on W3Schools As well as learning blockchain technology through Steem at the same time.

Everyday rich is requiring me as a "proof of work" to show what I learned that day to him.

So we came up with the great idea why not help others, and make a quick easy to follow tutorial by posting what I learned each day.
Since I'm only doing 1 short tutorial a day, it's so easy to follow along and learn (should be under 5 min).
I get the added bonus of repeating the material, such that I truly understand it.

jetseparator.gif

You can try your own coding here using this link:
https://www.w3schools.com/html/html_tables.asp

Tables are a neat way to organize and present data in way that is easy for someone to understand.  You can label your tables with different shaded colors and put headers at the top of each table too.

An HTML table is defined with the basic  < table > tag.  
Each table row is defined with the < tr > tag.  
A table header is defined with the < th > tag. 
By default, table headings are bold and centered. 
A table data/cell is defined with the < td > tag.

This is what coding for a simple table looks like:

![tables coding.PNG](https://cdn.steemitimages.com/DQmT7McgM1xd3C4CKxbitQEVdtWyioPJgQr4TzzTNCJjbau/tables%20coding.PNG)

when we open that notepad file in an internet browser, it looks like this:

notice how all the data is neatly organized in columns, such as First name, Last name and Age.  There is no fancy design here.

![table safaro.PNG](https://cdn.steemitimages.com/DQmYcJpWrpUnYKH5xdNs2bujWjQZptENvbjmsivzCiaC8sW/table%20safaro.PNG)

To further help organize your work, add a border around each box of data.  This gives an outline look and makes it easier to see how the programmer organized their information.

Check out the coding of a table with borders:

![border coding.PNG](https://cdn.steemitimages.com/DQmSvhCJrWMboRwg18y5JXviEsmWeW9rnSoZhADim9KhpBt/border%20coding.PNG)

And the finished product in safari:

![border safari.PNG](https://cdn.steemitimages.com/DQmZW6JcJKuk5rKALFcR6KuwbjsCinLdYLnD22fT8Tx9Pro/border%20safari.PNG)

If you just found this Post and want to start from the beginning here are the earlier posts in the series:

<a href="https://steemit.com/partiko/@nolimit909/learning-how-to-code-html-ttpbcyua">Introduction to my journey</a>
<a href="https://steemit.com/blog/@nolimit909/day-2-of-html">Day 2 of HTML</a>
<a href="https://steemit.com/coding/@nolimit909/day-3-of-html-attributes">Day 3 of Attributes</a>
<a href="https://steemit.com/coding/@nolimit909/my-daily-learning-how-to-code-day-3-of-html-background-and-text-colors">Day 4 of HMTL Background and Text Colors</a>
<a href="https://steemit.com/coding/@nolimit909/my-daily-learning-how-to-code-day-3-of-html-background-and-text-colorss">Day 5 of HTML Fonts</a>
<a href="https://steemit.com/coding/@nolimit909/My-Daily-learning-How-to-Code-Day-8-of-HTML-Hyperlinks">Day 8 of HTML Fonts</a>
<a href="https://steemit.com/coding/@nolimit909/my-daily-learning-how-to-code-day-8-of-html-images">Day 8 of HTML Images</a>

You want to learn, Just remember the Nike Slogan:
![Just Do It](https://cdn.steemitimages.com/DQmXAFiDao3n1iLa4kfd5K619GckzW8337727GraDCpKXBc/image.png)

*** Thank you to @richatvns for setting up this template for posting and base artwork
![](https://cdn.steemitimages.com/DQmNsmXcZZM6oo1i82Qb6Ku1wj57UMnHBkf7VegYBALjsKA/image.png)
![poker_separator.gif](https://cdn.steemitimages.com/DQmV9o6NUzgkN1U6uXi9moD1EHbxUYUR3y1nLwEL6JnEnmC/poker_separator.gif)
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 56 others
properties (23)
authornolimit909
permlinkmy-daily-learning-how-to-code-day-8-of-html-tables
categorycoding
json_metadata{"tags":["coding","blog","learning","technology","programming"],"users":["richatvns"],"image":["https://cdn.steemitimages.com/DQmT7McgM1xd3C4CKxbitQEVdtWyioPJgQr4TzzTNCJjbau/tables%20coding.PNG","https://cdn.steemitimages.com/DQmYcJpWrpUnYKH5xdNs2bujWjQZptENvbjmsivzCiaC8sW/table%20safaro.PNG","https://cdn.steemitimages.com/DQmSvhCJrWMboRwg18y5JXviEsmWeW9rnSoZhADim9KhpBt/border%20coding.PNG","https://cdn.steemitimages.com/DQmZW6JcJKuk5rKALFcR6KuwbjsCinLdYLnD22fT8Tx9Pro/border%20safari.PNG","https://cdn.steemitimages.com/DQmXAFiDao3n1iLa4kfd5K619GckzW8337727GraDCpKXBc/image.png","https://cdn.steemitimages.com/DQmNsmXcZZM6oo1i82Qb6Ku1wj57UMnHBkf7VegYBALjsKA/image.png","https://cdn.steemitimages.com/DQmV9o6NUzgkN1U6uXi9moD1EHbxUYUR3y1nLwEL6JnEnmC/poker_separator.gif"],"links":["https://www.w3schools.com/html/html_tables.asp","https://steemit.com/partiko/@nolimit909/learning-how-to-code-html-ttpbcyua","https://steemit.com/blog/@nolimit909/day-2-of-html","https://steemit.com/coding/@nolimit909/day-3-of-html-attributes","https://steemit.com/coding/@nolimit909/my-daily-learning-how-to-code-day-3-of-html-background-and-text-colors","https://steemit.com/coding/@nolimit909/my-daily-learning-how-to-code-day-3-of-html-background-and-text-colorss","https://steemit.com/coding/@nolimit909/My-Daily-learning-How-to-Code-Day-8-of-HTML-Hyperlinks","https://steemit.com/coding/@nolimit909/my-daily-learning-how-to-code-day-8-of-html-images"],"app":"steemit/0.1","format":"markdown"}
created2019-04-11 12:21:36
last_update2019-04-11 12:21:36
depth0
children2
last_payout2019-04-18 12:21:36
cashout_time1969-12-31 23:59:59
total_payout_value18.732 HBD
curator_payout_value6.084 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length3,835
author_reputation64,026,911,851,005
root_title"My Daily learning - How to Code Day 8 of HTML: Tables"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id82,879,059
net_rshares40,453,036,145,312
author_curate_reward""
vote details (120)
@richatvns ·
Much props for the article on tables.... div, links , and forms are just around the corner.  Then I can start giving you little pieces of code to get your hands wet on....

But, what happened to that great banner I made for this template....

Come on now, you need to have visual key to help people see your article in their feed.  It's a branding thing buddy!

Sorry but calling you out on small improvements with an explanation is Mentoring 101....Got to keep doing my Job to get you prepared for clients in the real world where for computer folk the devil is in the details.

![thumbsupcolor.jpg](https://cdn.steemitimages.com/DQmbcLX24RekYNM213VpTUa6pjJHMtKJ3JjtfbyvtJAP5Tj/thumbsupcolor.jpg)
properties (22)
authorrichatvns
permlinkre-nolimit909-my-daily-learning-how-to-code-day-8-of-html-tables-20190413t104723871z
categorycoding
json_metadata{"tags":["coding"],"image":["https://cdn.steemitimages.com/DQmbcLX24RekYNM213VpTUa6pjJHMtKJ3JjtfbyvtJAP5Tj/thumbsupcolor.jpg"],"app":"steemit/0.1"}
created2019-04-13 10:47:27
last_update2019-04-13 10:47:27
depth1
children0
last_payout2019-04-20 10:47:27
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length696
author_reputation243,323,637,506,719
root_title"My Daily learning - How to Code Day 8 of HTML: Tables"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id83,012,875
net_rshares0
@treeplanter ·
Thanks for your donation
<center>
<h3>You just planted 0.10 tree(s)!</h3>
Thanks to @richatvns
<h3>We have planted already 
8078.60 trees
out of 1,000,000<h3>
Let\'s save and restore Abongphen Highland Forest
in Cameroonian village Kedjom-Keku!
Plant trees with @treeplanter and get paid for it!
My Steem Power = 23272.61
Thanks a lot!
@martin.mikes coordinator of @kedjom-keku
![treeplantermessage_ok.png](https://steemitimages.com/DQmdeFhTevmcmLvubxMMDoYBoNSaz4ftt7PxktmLDmF2WGg/treeplantermessage_ok.png)
</center>
properties (22)
authortreeplanter
permlinkre-nolimit909-my-daily-learning-how-to-code-day-8-of-html-tables-20190414t192223684z
categorycoding
json_metadata{}
created2019-04-14 19:22:24
last_update2019-04-14 19:22:24
depth1
children0
last_payout2019-04-21 19:22:24
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length492
author_reputation62,929,728,687,402
root_title"My Daily learning - How to Code Day 8 of HTML: Tables"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id83,095,444
net_rshares0