How To Create A Table Using Div

Last week, I covered using the DIV tag to make unique content for your course, but did you know that you can also use the DIV tag to make tables! All you need to do is include CSS to create interesting tables. For example, you can create tables with borders or no borders and include content that has bullet points or numbered lists. Want to know how to do this? Let's get started!

What I will cover:

Benefits of using DIV tag for tables
Using CSS with a DIV tag to create a table
Using CSS with DIV tag to create a table in your Course

Benefits of using DIV tag for tables

One benefit of using DIV tags to create a table would be that you are creating responsive content. What is responsive content? Responsive content means that your content will adapt to whatever the learner is using to view it. So if the learner is using a smartphone or computer browser to view the content, it will adapt (resize) the content to various sizes and make sure it is consistent throughout all devices the learners use.

If you look at the example below, you can see how a regular table gets distorted when viewed on a smartphone.

Browser View:

Smartphone View:

Using CSS with a DIV tag to create a Table

Creating a table using DIV tags is pretty easy! Once again, just like I did last week, we will be using CSS to create a table. The code below is what you will use to create the table:

Float: tells the DIV where to be placed in the document. The DIV can be shifted to the left or right. If you create a table, it is good to shift all DIVs that make up the table in the same direction.

Width: DIVs will always stretch out the full available width of the document, so you want to tell the DIV how wide it can get. If we set all DIVs to the same size, they will all stretch the same proportion to the document they are in.

Border: the size of the line that creates the table. It is measures in px (px- width or height of a single dot of a screen pixel), you can define the kind of border you want to use. In this example, I am using a solid border. You can also define the color of the border. In the code above, I am using black which in hexadecimal color is #00000.

This will be the result:

Copy the code below:

            <div style="float: left; width: 33%; border: 1px solid #000000;">  1st Column </div> <div style="float: left; width: 33%; border: 1px solid #000000;">   2nd Column </div> <div style="float: left; width: 33%; border: 1px solid #000000;">  3rd Column </div>

Using CSS with DIV tag to create a table in your Course

So how can you use DIV tags to create tables for your course? Now that you know what code to use to create a table using DIV tags, you can use the code to present information in your course that you might typically use a table.

In the example below, I created a table and included headers for each of the different columns.

I placed it at the end of the last paragraph:

Copy the code below:

            <div style="float: left; width: 33%; border: 1px solid #000000;">     <h2>Perception:</h2>     <ul>         <li>Left Item 1</li>         <li>Left Item 2</li>         <li>Left Item 3</li>         <li>Left Item 4</li>         <li>Left Item 5</li>     </ul> </div> <div style="float: left; width: 33%; border: 1px solid #000000;">     <h2>Cognition:</h2>     <ul>         <li>Middle Item 1</li>         <li>Middle Item 2</li>         <li>Middle Item 3</li>         <li>Middle Item 4</li>         <li>Middle Item 5</li>     </ul> </div> <div style="float: left; width: 33%; border: 1px solid #000000;">     <h2>Emotion:</h2>     <ul>         <li>Right Item 1</li>         <li>Right Item 2</li>         <li>Right Item 3</li>         <li>Right Item 4</li>         <li>Right Item 5</li>     </ul> </div>

You can add additional DIV tags to create more rows. I hope you enjoyed being introduced to a new way of presenting information that you might find helpful. Although it is good to use DIVs for tables, it is perfectly okay to use an HTML table.So don't think you should not be using HTML tables and always create tabular data using DIVs with CSS.

Are you already using DIV tags to create tables? Let me know in the comments below and make sure to subscribe!