Question 261862 in Html Question posted in
Some basic documentation can be found here.

Html – how to align 3 columns

I have 3 columns and I want each column to be aligned left. I am able to do this using flexbox but it seems like a lot of overhead. Is there a better approach?

span {
  display: block;
  margin:5px;
}
<div style="display:flex;justify-content:center">
  <div>
    <span>High</span>
    <span>Low</span>
    <span>Mean</span>
    <span>Median</span>
    <span>Mode</span>
  </div>
  <div>
    <span>=</span>
    <span>=</span>
    <span>=</span>
    <span>=</span>
    <span>=</span>
  </div>
  <div>
    
    <span>100</span>
    <span>80</span>
    <span>94.29</span>
    <span>100</span>
    <span>100</span>
     </div>
</div>
Tags:

3

Answers


  1. 0

    To me this looks like a table of two columns of data which when presented are joined by the = signs.

    This snippet has one table with each row having the left and right values in its two cells.

    The = are provided by a before pseudo element.

    <style>
  td:last-child::before {
    content: '= ';
  }
</style>
<div style="display:flex;justify-content:center">

  <table>
    <tr>
      <td>High</td>
      <td>100</td>
    </tr>


    <tr>
      <td>Low</td>
      <td>80</td>
    </tr>


    <tr>
      <td>Mean</td>
      <td>94.29</td>
    </tr>


    <tr>
      <td>Median</td>
      <td>100</td>
    </tr>


    <tr>
      <td>Mode</td>
      <td>100</td>
    </tr>
  </table>
</div>

    This structure would seem to make more sense to screen readers too as the data is linked logically.

    Login or Signup to reply.
  2. 0

    Start with a correct HTML structure where we can actually read the data then you can rely on a table layout

    .container {
  display: table;
  margin: auto;
}
.container p {
  display: table-row;
  word-spacing: 8px; /* space between "=" and numbers*/
}
.container p span {
  display: table-cell;
  padding-right: 12px; /* space between the text and "=" */
}
    <div class="container">
  <p><span>High</span> = 100</p>
  <p><span>Low</span> = 80</p>
  <p><span>Mean</span> = 94.29</p>
  <p><span>Median</span> = 100</p>
  <p><span>Mode</span> = 100</p>
</div>
    Login or Signup to reply.
  3. 0

    Perhaps a Description List is an appropriate element to use here?

    dl {
   display: grid;
   grid-template-columns: auto auto;
}

dd {
  margin: 0
}

dd:before {
  content: "= ";
}
    <dl>
  <dt>High</dt><dd>100</dd>
  <dt>Low</dt><dd>80</dd>
  <dt>Mean</dt><dd>94.29</dd>
  <dt>Median</dt><dd>100</dd>
  <dt>Mode</dt><dd>100</dd>
</dl>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search