HTML Tables Explained

Within html you can create table to display more organised data, you could use them to display data directly from a database or a records system. Tables contain rows and columns with data held within cells, similar to spreadsheet applications such as Excel or Google Sheets.

The code snippet below shows a simple table created in html. The table tag has an opening and closing tag and contains table row, or ‘tr’, tags. The table row tags also have opening and closing tags, and contain either table heading (‘th’) table data (‘td’) tags. The ‘th’ and ‘td’ tags contain the text that will be displayed in the cells of the table. The table heading tags will be more bold than normal table data cells, as they’re used for the heading of the table. The final thing about this code the border attribute. This means the table rows and cells will have a line around the outside, this is optional and is used so we can see how exactly the table is structured.

The below code snippet is a table that has a non-conventional structure. The ‘rowspan’ and ‘colspan’ attributes can be used within tables cells to make them bigger thana normal cell. The code below will create a table that is 3 by 3. The top left cell will span 3 rows, meaning that the 3 cells of the left hand side will be merged together. The top and bottom rows contains two more cells, on in the middle and one on the right hand side. These two cells on both the top and bottom have been merged together using the ‘colspan’ attribute. The two remaining cells in the center are kept the same size and not merged with any other cell.

Tables in html can be complicated to new developers. Create a new ‘.html’ file and experiment with tables, rowspan, and colspan. Remember to save and re-open the ‘.html’ file when you make changes. Websites used to be designed using only tables, to give strucutre to the webpage. This is still possible, but is not recommended. This is because the structure of a single website when display on a desktop and on a mobile can differ greatly, and this is difficult to do when using a table for the layout of a webpage.

Leave a Reply