HTML/CSS table footer does not align right

Question

So i have this table:

 <table style="border-collapse: separate; border-spacing: 6px;">
 <tbody>
 <thead>
 <tr>
 <th>No</th>
 <th>Nome</th>
 <th>Quantidade</th>
 <th>Preço</th>               
 </tr>
 </thead>
       <tr style="border-bottom: 1px red;">
       <td>text1</td>
       <td>text2</td>
       <td>text3</td>
       <td>text4</td>
       </tr>';
       </tbody>
       </table>
      <hr style="margin: 0px;">
     <table>
     <tbody>
     <tr align="right">
     <td>
     <h5 style="color:#F00"align="right">Total : 1250.8€ </h5>
     </td>
     </tr>
     </tbody>
     </table>
     </div>

And this is the output:

I have tried all different types of align right (float, align-content, do another table, do another td).

I think this is not a good pratice of <table> but this is as far i could get. How can i align right the <h5>(Total:) and make the code more tidy?

Answer 1

Your markup is weird and in parts erroneous:

• There's a closing div tag that never opens (which I suppose is a copypaste error and not a markup one)
• <tbody> and <thead> are supposed to be siblings, not children of each other
• non-table markup such as <hr /> should only be within <td>- or <th>-tags
• using headline tags for non-formatting purposes isn't as good as a CSS solution because of readability and maintainability - it seems it's only being used here for aligning the text, which is something that should be handled by CSS also for reasons of compatibility

I'm not sure what exactly is the bug you mention, but it's most likely caused by those errors. Also, displaying two tables underneath each other will likely give you unwanted results, as all the cool things about tables - the horizontal alignment of seperate rows - will be lost.

That being said, here's a fixed version that incorporates what I deem to be tidy markup (all style properties are done via CSS, not inline styles, which is easier to maintain), proper html structure and achieving what I'm guessing you want:

table.price-list {
  border-collapse: separate;
  border-spacing: 6px;
  text-align: center;
}
table.price-list tbody tr:last-child td {
  border-top: 1px solid #ddd;
  color: red;
  text-align: right;
}

<table class="price-list">
  <thead>
    <tr>
      <th>No</th>
      <th>Nome</th>
      <th>Quantidade</th>
      <th>Preço</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>text1</td>
      <td>text2</td>
      <td>text3</td>
      <td>text4</td>
    </tr>
    <tr>
      <td colspan="4">Total : 1250.8€</td>
    </tr>
  </tbody>
</table>