How to Create Table Only Using Tag and CSS

Usually, a table in HTML is created through the “<table>” tag. However, most beginner web developers think that this is the only way to create a table in HTML. But it is also possible to create a table using only the “<div>” tags in HTML and applying the CSS style properties on the div content.

This post will give a complete solution to how to create a table using only the “<div>” tag and CSS properties.

How to Create Table Through <div> Tag and CSS?

The developers can create a table in HTML by adding a main “<div>” tag to create a table and then multiple “<div>” tags inside it.

Example
Consider the following HTML code example to create a table:

In the code snippet above:

• A “<div>” tag is added with the class named “divTable”.
• Inside the “div” container element, add another “div” container element with the class declared as “headerRow”.
• Again, add three “div” elements that have the classes named “divRow” with three sub containers with the “divCell” class.
• Then, add three div elements add the “ID”, “Name” and “Age” in the header row of the table.
• After that, specify the values for “ID”, “Name” and “Age” for each div element.

This was all about how to use the “div” element to create a table. Now, let’s apply the CSS properties to it:

In the above CSS style element:

• Add a selector that refers to the “divTable” (that contains all the table values) and define the desired CSS properties (i.e., “display”, “width”, “background-color”, “border” and “border-spacing”) for the table content.
• After that, add a class selector that selects the elements of the “divRow” class to add the CSS “width” and “display” properties to the elements.
• Lastly, add the CSS style properties to the elements in the “.divCell” class selector.

This will create a table in the output and will display the following results:

That was all about creating a table in HTML using only <div> tags and CSS properties.

Conclusion

A table in HTML can also be created through only the div tag and the CSS style properties. To do so, create a separate main div container element to create the table and some separate div container elements inside that to create the rows of the table. Each div container element will have their respective id or classes. Moreover, the class selectors are used to select the div elements and to apply the CSS properties to them. This post guided about creating a table only using div tag and CSS.