CyberBotMachines - teaching you how to speed up your programming career!
There are two ways to code table in HTML. First one is using the table element and second one is using div element. (will talk about this one in the next section in more detail).
Using table element you can create simplest table that looks like this:
And the code for this table is provided below:
In short that is it.
When you code the table you can use th elements to define the header. From the image above you can see that it's automatically set to bold text so it's distinguishable from regular table cell.
And you can also easily set different background color for the header cells in CSS.
Another option you have when creating a table is div table.
Basically what you do is define each div as a cell and the table is automatically created.
Let's say we set cell width to 200px. That is good but it's not enough. Every cell will all be in a new line like this:
This is because even if you limit the width of the div element, it will still "occupy" the full available width of the parent element.
To fix this default behavior all you have to do is add this simple CSS property - float: left; and every cell will fill all the available space in a single row.
Also to limit the number of cells that fit into a single line (i.e. limit the number of columns) - we will define a wrapper element with the class div-table that has width set to 400px so we can fit exactly 2 cells inside.
And this is the end result - we coded a div table that looks like this:
And here is the full code with which you can code this div table yourself:
And this is really all there is when you're trying to code table in HTML using any of the available options:
- using table element
- using div table
Until next time,