HTML Table display in webpage made super easy

For 2 of my recent posts it was for me necessary to learn or take a draft to employ my data into an HTML table. I searched along, some resources were too long and i didn’t understand the concept,also there were many tutorials to learn that I didn’t want to use now. I was just interested to find out how to write html tables to my specific needs which made  searching for drafts even harder.

This website is my choice for a total newbie like me and towards the other HTML newbies in the world.

Of course the table was not the right draft to use, so I thought to change and play with the body layout as I learned the meaning of it and leave the general structure as it is.

An important factor for me was to copy the general HTML table structure, see link above into the text editor. I used gedit Text Editor cause I operate on Ubuntu which is based on Linux.

Until I saved it as an html it was all black text, then saving it as an html file made it all coloured as in the shown preview on the above link.

Previewing the changes in the webbrowser after saving the changed data, helped me alot.

This was my first html table                                                                     

Following changes to the reference table have been applied:

  • colgroup span background white defined as 6 Fs
  • 2 columns and 8 rows including header, footer and body table
  • deleted parts: Table Header – Head 3, Table Footer –  Foot 3, Table Body – C, F and corresponding endings (e.g. <td>C</td>)
  • increased row size instead of 2 to 6 rows. This way A(heart health) is defined as column 1, row 2 and D(Detoxification) as column 1, row 3 etc. We can say that every two letters define one row,these just needed to be updated to represent my own. This is an example how to add a row (</tr>  <tr> <td>G</td> <td>H</td>) and fill instead of G,H your own data.

In all it was a worthwhile tutorial session and a new learned experience where I believe that it has helped me a lot in establishing various table layouts and hope that others will benefit as much from it as I did today.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s