Year-End Discount: 10% OFF 1-year and 20% OFF 2-year subscriptions!

Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

html
column

How to create columns in HTML

Educative Answers Team

Tired of LeetCode? 😩

Learn the 24 patterns to solve any coding interview question without getting lost in a maze of LeetCode-style practice problems. Practice your skills in a hands-on, setup-free coding environment. πŸ’ͺ

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


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.
svg viewer

Example

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

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.


RELATED TAGS

html
column
Copyright Β©2022 Educative, Inc. All rights reserved

Tired of LeetCode? 😩

Learn the 24 patterns to solve any coding interview question without getting lost in a maze of LeetCode-style practice problems. Practice your skills in a hands-on, setup-free coding environment. πŸ’ͺ

Keep Exploring
Related Courses