Text with 2 different alignments

Question

Text with 2 different alignments

Navigation

#1 by (1 votes)

0

.table, th, td {
    border: solid #000000;
    border-collapse: collapse;
    border-width: 3px;
}
.th, td {
    border-width: 3px;
    font-family: Open Sans;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>

<table style="width:100%" "float:left" class="table">
  <tr>
    <th align="center" bgcolor="#def2d9" colspan="3">1 STARTER</th>
  </tr> 
  <tr>
    <th></th>
    <th>Users</th> 
    <th></th>
  </tr>
  <tr>
    <td>M00</td>
    <td align="center">1</td>
    <td>Base Package</td>
  </tr>
  <tr>
    <td>SP40</td>
    <td align="center">NA</td>
    <td>Training</td>
  </tr>
  <tr>
    <td align="justify" colspan="3"><p><b>PRICE:</b> 9 900,00€
    <p>+
    <p>131,67€
    <p>Monthly Subscription</td>
  </tr>
</table>
</body>
</html>

Good afternoon,

I've been here a few hours to research how I can solve this problem. I have a table and in the last line I put the price of the product, where "PRICE:" needs to be aligned to the left and the value needs to be aligned to the right, this in the same line. I'll leave here the HTML and CSS.

html css tabela align

asked by anonymous 20.03.2017 / 17:27

1 answer

Uploading files and inputs of any type submitted with ajax MVC structure on remote server

score 1 · Accepted Answer

There are several ways you can do what you want. The simplest way I see is to add a span with the right alignment to the value, like this:

.table,
th,
td {
  border: solid #000000;
  border-collapse: collapse;
  border-width: 3px;
}

.th,
td {
  border-width: 3px;
  font-family: Open Sans;
}

.right {
  float: right;
}

.left {
  text-align: left;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <table style="width:100%" "float:left" class="table">
    <tr>
      <th align="center" bgcolor="#def2d9" colspan="3">1 STARTER</th>
    </tr>
    <tr>
      <th></th>
      <th>Users</th>
      <th></th>
    </tr>
    <tr>
      <td>M00</td>
      <td align="center">1</td>
      <td>Base Package</td>
    </tr>
    <tr>
      <td>SP40</td>
      <td align="center">NA</td>
      <td>Training</td>
    </tr>
    <tr>
      <td align="justify" colspan="3">
        <p class="left">
          <b>PRICE</b>
          <span class="right">9 900,00€</span>
        </p>
        <p>+</p>
        <p>131,67€</p>
        <p>Monthly Subscription </p>
      </td>
    </tr>
  </table>
</body>

</html>