**HTML columns** are used to arrange data in an organized way, this allows clear comparisons to be made between 2 things.

<br>

## Defining columns in HTML

An HTML column is defined in the `<div>` tag using the `class = "column"` keyword. More columns can be added by adding more divs with the same class. The following syntax is used to add columns in HTML.
- `<div class="row">` tag is used to initialize the row where all the columns will be added.
- `<div class="column" >` tag is used to add the corresponding number of columns.
- `style="background-color:#aaa;"` property is used to give color to the column.
- Individual properties, such as `width: 50%;`, are added to the columns in the style sheet for that particular `div`.

## Example

Below is an example of how to create 2  basic columns in HTML.


<html>
 <head>
    <style>
    {
        box-sizing: border-box;
    }
    /* Set additional styling options for the columns*/
    .column {
    float: left;
    width: 50%;
    }

    .row:after {
    content: "";
    display: table;
    clear: both;
    }
    </style>
 </head>
 <body>
    <div class="row">
        <div class="column" style="background-color:#FFB695;">
            <h2>Column 1</h2>
            <p>Data..</p>
        </div>
        <div class="column" style="background-color:#96D1CD;">
            <h2>Column 2</h2>
            <p>Data..</p>
        </div>
    </div>
 </body>
</html>

// document.addEventListener("DOMContentLoaded", function () {
//   pTag = document.querySelector("div");
//   newVal = document.createElement("p");
//   newVal.innerHTML = 'Hello, Hello';
//   pTag.appendChild(newVal);
// });

// Async Tests Example
/*
window.onModulesLoaded = new Promise( function( resolve, reject ) {
  setTimeout(function() {
    pTag = document.querySelector("div");
    pTag.innerHTML = '';
    newVal = document.createElement("p");
    newVal.innerHTML = 'Hello World';
    pTag.appendChild(newVal);
    resolve();
  }, 100)
});
*/

codemirror

### Multiple columns

HTML also allows the creation of more than two columns in a single row; we can set varying widths for these columns by specifying them in the style sheet.

<html>
 <head>
    <style>
    {
        box-sizing: border-box;
    }
    /* Set additional styling options for the columns */
    .column {
    float: left;
    }

    /* Set width length for the left, right and middle columns */
    .left {
    width: 20%;
    }

    .middle {
    width: 30%;
    }
    
    .right {
    width: 50%;
    }

    .row:after {
    content: "";
    display: table;
    clear: both;
    }
    </style>
 </head>
 <body>
    <div class="row">
        <div class="column left" style="background-color:#FFB695;">
            <h2>Column 1</h2>
            <p>Data..</p>
        </div>
        <div class="column middle" style="background-color:#96D1CD;">
            <h2>Column 2</h2>
            <p>Data..</p>
        </div>
        <div class="column right" style="background-color:#74C3E1;">
            <h2>Column 3</h2>
            <p>Data..</p>
        </div>
    </div>
 </body>
</html>

How to create columns in HTML

Defining columns in HTML

Example

Multiple columns