Grepper Logo

Tables for HTML (beginner lesson) 

Here are some basic table structures and more for beginners lol. 


Here's some basic info you need to know: 

(Note: Everything here has a closing tag unless said otherwise) 

<table> is the element you need to make a table. (duh)

<tr> You indicate the start of each row using the opening tag. (The tr stands for table row.) 

<td> is table data, which is where you put the things you wanna list

Here is your fist example below. Throw it into a code test site like https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro and try it.

This one above has the following which you need to know:

<th>  The element is used just like the element but its purpose is to represent the heading for either a column or a row. (The th stands for table heading.)

This one below has a spanning column. Scary? Not really. 

The 'colspan' attribute can be used on a or element and indicates how many columns that cell should run across. Easy right? throw it into the code tester from W3Schools 

Since we have spanning columns... we need spanning rows

The 'rowspan' attribute can be used on a or element to indicate how many rows a cell should span down the table. Try it! 

Want some long tables? HERE:

The headings of the table should sit inside the <thead> element. 

The body should sit inside the <tbody>  element.

The footer belongs inside the <tfoot> element. 

Want a challenge for  practice? Here:

Write the code for the following charts (yes you must use color) 

Easy: 


Medium: 


Hard: 

Extra hard?:

hint: it's on the chart ;) 


Now have fun coders! 

Next lesson: Colors Inside Charts

You can support me by following my Twitch (twitch.tv/sounsd) or Twitter (NotSoundLive) 




X

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.