Question

早在现在就在html上打字桌,在我的第一个学校项目定期桌上工作。我感到不安的是案文的编排。我期望原子数量和体积相同,但左上和大众的原体数目与右上一样,但我不知道哪一方使用(一百万分之四)。

这是我所尝试的:

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

Answer 1

以超文本和中央支助事务制作一个定期表格,对于刚刚在的人来说是一项困难的任务。解决办法需要加固的表格:管理定期表格的外表,在外表的每个电池中,外表是内部的(封顶的)表格,以管理该要素的布局。

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>

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>

然后,你需要一个外表来管理整个事情。一开始:

.periodic {
  border-collapse: collapse;
}

.periodic > tbody > tr > td {
  width: 6em;
}

.periodic > tbody > tr > td:not(.empty) {
  border: 1px solid black;
}

.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">11</td>
          <td class="massa">22,989</td>
        </tr>
        <tr>
          <td class="symbol" colspan="2">Na</td>
        </tr>
        <tr>
          <td class="nome" colspan="2">Sodium</td>
        </tr>
      </table>
    </td>
    <td class="alkali-earth-metal">
      <table>
        <tr>
          <td class="numeroatomico">12</td>
          <td class="massa">24,305</td>
        </tr>
        <tr>
          <td class="symbol" colspan="2">Mg</td>
        </tr>
        <tr>
          <td class="nome" colspan="2">Magnesium</td>
        </tr>
      </table>
    </td>
    <td class="empty"></td>
  </tr>
  <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,956</td>
        </tr>
        <tr>
          <td class="symbol" colspan="2">Sc</td>
        </tr>
        <tr>
          <td class="nome" colspan="2">Scandium</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Answer 2

你们可以使用灵活工具来做到这一点:

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

友情链接