CODEWITHSUNDEEP
htmlcss
Adam
Adam

Reputation: 51

How can I create a table next to these lists? HTML

this is the code How can I create a table next to these lists?

<ol>
  <li>Administrative staff
    <ul>
      <li>Ali Alahmad</li>
      <li>Mohamad Batan</li>
      <li>Khandro</li>
      <li>Khadija M.</li>
    </ul>
  </li>
  <li>the teachers
    <ul>
      <li>B.Alham</li>
      <li>Musatafa</li>
      <li>M. Nour</li>
    </ul>
  </li>
  <li>Services team
    <ul>
      <li>Alexander</li>
      <li>Alian</li>
    </ul>
  </li>
  <li>Students
    <ul>
      <li> Omran Ali</li>
      <li> Aya Ali</li>
      <li>Samira Ali</li>
    </ul>
  </li>
  <ol>

Upvotes: 0

Views: 452

Answers (2)

Isuru Lakruwan
Isuru Lakruwan

Reputation: 121

you can use css flexbox to achieve this. Here is the complete code.

<html>

<head>
    <style>
        .flex-container {
            display: flex;
            flex-wrap: wrap;

        }
    </style>
</head>

<body>

    <div class="flex-container">
        <div style="width:50%;">
            <ol>
                <li>Administrative staff
                    <ul>
                        <li>Ali Alahmad</li>
                        <li>Mohamad Batan</li>
                        <li>Khandro</li>
                        <li>Khadija M.</li>
                    </ul>
                </li>
                <li>the teachers
                    <ul>
                         <li>B.Alham</li>
                        <li>Musatafa</li>
                        <li>M. Nour</li>
                    </ul>
                </li>
                <li>Services team
                    <ul>
                        <li>Alexander</li>
                        <li>Alian</li>

                    </ul>
                </li>
                <li>Students
                    <ul>
                        <li> Omran Ali</li>
                        <li> Aya Ali</li>
                        <li>Samira Ali</li>
                    </ul>
                </li>
                <ol>
        </div>
        <div style="width:50%">
            place the code for table here
        </div>
    </div>
</body>

</html>

Here I have set the width of the div tags to 50% to make the columns equal width. you may change it if you need different widths for the columns.

If you hope to learn more on css flexbox, hope this link will help you.

Upvotes: 3

Scribble Nerd
Scribble Nerd

Reputation: 30

Welcome to StackOverflow Adam!

You can get a table next to the lists by putting both the list, and table into a <div> with the style display: inline-flex, like this:

<!--This would be your list-->
<div style="display: inline-flex;">
  <ol>
    <li>Sample List
      <ul>
        <li>1</li>        
        <li>2</li> 
        <li>3</li>
        <li>4</li>
      </ul>
    </li>
  <ol>
</div>
<!--And this would be your table-->
<div style="display: inline-flex;">
  <table>
    <tr>
      <th>Test</th>
      <th>Table</th>
    </tr>
    <tr>
      <td>This is a test table</th>
      <td>Sample Text</th>
    </tr>
    <tr>
      <td>Lorem Ipsum</th>
      <td>More Lorem Ipsum</th>
    </tr>
  </table>
</div>

Hope this helps!

Upvotes: 1

Related Questions