Text with 2 different alignments

Asked

Viewed 402 times

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 researching how I can solve this problem. I have a table and in the last row I put the price of the product, in which the "PRICE:" needs to be aligned to the left and the value needs to be aligned to the right, this in the same row. I’ll leave the HTML and CSS code here.

html css table align

  • Hello Melissa, I wonder if you could put the width=100% in the table just to get a better look at what you want? ?

  • @Randrade will then change with width=100%, and yes I just want that, but it has to be on the same line.

1 answer

1


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

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

  • It worked, thank you very much

Browser other questions tagged html css table align

You are not signed in. Login or sign up in order to post.