Html drop down list with multiple columns

...

Html drop down list with multiple columns

Drop Down List with Multiple Columns In the vast world of web development, simplicity is key. Today, we'll explore how to create an HTML drop-down list with multiple columns. Don't worry if you're new to coding – we'll take it step by step.

Step 1

Let's start by creating a basic HTML file. Open your favorite text editor and type the following:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multi-Column Dropdown</title>
</head>
<body>

</body>
</html>

Step 2: Adding a Simple Drop-Down List

<select>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
</select>

Step 3: Introducing Optgroups for Columns

To create multiple columns, we'll use the <optgroup> element. Each <optgroup> represents a column in our drop-down list. Let's modify our code:

<select>
    <optgroup label="Column 1">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
    </optgroup>
    <optgroup label="Column 2">
        <option value="option3">Option 3</option>
        <option value="option4">Option 4</option>
    </optgroup>
</select>

Step 4: Styling for Better Presentation

To make our drop-down visually appealing, let's add some basic styling. You can include the following CSS in the head of your HTML document:

<style>
    select {
        width: 200px;
        padding: 5px;
        font-size: 16px;
    }

    optgroup {
        font-weight: bold;
    }
    </style>

This styling ensures that the drop-down is easy to read and understand.

After Use This Code

Creating an HTML drop-down list with multiple columns doesn't have to be complicated. By using the element, we can organize our options neatly. Feel free to customize the code further to suit your design preferences. Happy coding! Drop Down List with Multiple Columns in hindi