90 Days of Code: Table for Two

Photo by Zarak Khan

Do you see what I did there? It’s day two and I learned how to create tables 🤣

Today’s lesson consisted of creating Tables <table> and Forms <form> in HTML. Tables are great ways to structure information in a way that makes it more legible or to organize sections of a website. Forms act as a method to allow visitors of a website to send information through to the website owner. I was also introduced to HTML attributes like <cellspacing> and <border> to make the data in my tables easier to read. While this is not the suggested method to do style my tables, I have not yet learned CSS so it will have to do. When thinking about a website, the code tends to break down like this:

  • HTML is for structure

Until I start to cover CSS and Javascript, my website will not be aesthetically pleasing or be able to “do” much. Baby steps though.

Below is a screenshot of my CV page, and as you will see, my Work Experience and Skills sections contain tables in them. Under Work Experience, one column includes the date that I held each position and the other column includes the company and position held. This layout is important for readability. Under Skills I separated the skill from my skill level; indicated by the ⭐ ️emoji.

The second half of today’s lesson was about inserting fillable forms into a website. The form doesn’t actually work yet (remember that requires Javascript). However, I was able to create the skeleton and have it do something. Check out that beauty and its code below 👇🏾

I want to highlight a few things that are included in this form’s code.

I typed my personal email into the <form action> attribute to tell the form where I would like the submissions sent. Messages have to be sent somewhere, right? Also, note that each textbox has a label so users know what is required of that area. The textbox for Type Message: is considerably larger than the prior textboxes to accommodate the sender’s entire message. For this, I used the <textarea> tag instead of the <input> tag to allow for multi-line inputs.

We also created a repository on Github so that I can host my website somewhere for the time being. Up until this point, it was only available locally on my computer. I’m not completely sure how Github works, but everybody who’s ever written a line of code talks about it. Once I generate my website link, I will add it back here for everyone to see my progress.

Okay, day two is in the books. Stay tuned because things are about to get really colorful in the next module. I’m about to be introduced to CSS.

Freelancer, lifelong student, and wannabe techie. I love exploring disruptive startups and sparking cultural conversations. www.thecamcaldwell.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store