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

Html – What tag should I use so that the "1,008" don't change lines?

I’m learing tables on html right now and I’m working on a periodic table for my first school project. I’m having trouble formatting the text. I expect the atomic number and mass to be on the same line, but the atomic number on the left and the mass on the right, but I don’t know what tag to use (I’m using div).

Wrapping text

This is what I’ve tried:

<th class= hidrogenio>
    <div class= numeroatomico>
        1
        <div class= massa>1,008</div>
    </div>
    H
    <div class= nome>Hidrogênio</div>
</th>
Tags:

2

Answers


  1. 0

    You can use flexbox to achieve this:

    .header { 
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
}

.element {
  padding: 10px;
  width: 100px;
  height: 100px;
  background: cornflowerblue;
 }
    <div class="element">
<div class="header">
  <span>1</span>
  <span>1,008</span>
</div>
</div>
    Login or Signup to reply.
  2. 0

    Creating a periodic table in HTML and CSS is a difficult assignment for someone who is just learning tables. The solution requires nested tables: an outer table to manage the periodic table itself, and within each cell of the outer table is an inner (nested) table to manage the layout of the element.

    The inner tables require three rows and two columns. The second and third rows each contain a cell which spans both columns.

    <table>
  <tr>
    <td class="numeroatomico">19</td>
    <td class="massa">39,098</td>
  </tr>
  <tr>
    <td class="symbol" colspan="2">K</td>
  </tr>
  <tr>
    <td class="nome" colspan="2">Potassium</td>
  </tr>
</table>

    enter image description here

    table {
  border: 1px solid #888;
  width: 6em;
}

td {
  border: 1px solid red;
}

.numeroatomico {
  font-weight: bold;
}

.massa {
  font-size: 0.75em;
  text-align: right;
}

.symbol {
  font-size: 2em;
  text-align: center;
}

.nome {
  text-align: center;
}
    <table>
  <tr>
    <td class="numeroatomico">19</td>
    <td class="massa">39,098</td>
  </tr>
  <tr>
    <td class="symbol" colspan="2">K</td>
  </tr>
  <tr>
    <td class="nome" colspan="2">Potassium</td>
  </tr>
</table>

    Then you need an outer table to manage the entire thing. Here’s a start:

    enter image description here

    .periodic {
  border-collapse: collapse;
}

.periodic > tbody > tr > td {
  border: 1px solid black;
  width: 6em;
}

.periodic > tbody > tr > td >table {
  width: 100%;
}

.numeroatomico {
  font-weight: bold;
}

.massa {
  font-size: 0.75em;
  text-align: right;
}

.symbol {
  font-size: 2em;
  text-align: center;
}

.nome {
  text-align: center;
}

.alkali-metal {
  background: pink;
}

.alkali-earth-metal {
  background: lavender;
}

.transition-metal {
  background: aliceblue;
}
    <table class="periodic">
  <tr>
    <td class="alkali-metal">
      <table>
        <tr>
          <td class="numeroatomico">19</td>
          <td class="massa">39,098</td>
        </tr>
        <tr>
          <td class="symbol" colspan="2">K</td>
        </tr>
        <tr>
          <td class="nome" colspan="2">Potassium</td>
        </tr>
      </table>
    </td>
    <td class="alkali-earth-metal">
      <table>
        <tr>
          <td class="numeroatomico">20</td>
          <td class="massa">40,08</td>
        </tr>
        <tr>
          <td class="symbol" colspan="2">Ca</td>
        </tr>
        <tr>
          <td class="nome" colspan="2">Calcium</td>
        </tr>
      </table>
    </td>
    <td class="transition-metal">
      <table>
        <tr>
          <td class="numeroatomico">21</td>
          <td class="massa">44,955</td>
        </tr>
        <tr>
          <td class="symbol" colspan="2">Sc</td>
        </tr>
        <tr>
          <td class="nome" colspan="2">Scandium</td>
        </tr>
      </table>
    </td>
  </tr>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search