HTML Tables;

What is it?

A Table is simply a grid made of rows and columns that has a header row, and a bunch of child rows.
In HTML there are 4 common table tags, the (i) Table Tag (ii) Header Tag (iii) the Row Tag (iv) and the data tag

Syntax:

Table Tag: <Table> and </Table>
Header Tag : <TH> and </TH>
Row Tag: <TR> and </TR>
Data Tag: <TD> and </TD>

Basic Table Example :

<Table border='1'>
     <TH>
          Languages
     </TH>
     <TH>
          Difficulty
     </TH>
     <TR>
          <TD> HTML </TD>
          <TD> Easy </TD>
     </TR>
     <TR>
          <TD> JavaScript </TD>
          <TD> Intermediate </TD>
     </TR>
     <TR>
          <TD> CSS </TD>
          <TD style='background: grey; color: white;' > Intermediate </TD>
     </TR>
</Table>

What's happening in the script above?

The above will build a table that has 2 Headers Rows entitled "Languages" and "Difficulty"
The <TR> indicates the starting of a new row, for which in this case we will want two <TD> tags to indicate 2 data elements.
Since there are now a couple of rows of data, we will need an additional <TR> tag to begin the 2nd row of data.
Next we end the table script by adding a closing </Table> tag.
< Table border='1' > indicates that our table will have a border around it. Oddly this is still HTML vs CSS in the bottom cell.
If you wanted to change the colors or anything else about it, we can use CSS to style it.

Example Output:

Languages	Difficulty
HTML	Easy
JavaScript	Intermediate
CSS	Intermediate

Connect via LinkedIn

Kevin Regan

Have an article, idea, found a typo, want to contribute? Shoot me an email Here