Center text in HTML table

Question

I've just started programming in HTML and can't seem to get this right. I want to center the text in a table, and although I've managed to do it already with a simple HTML page, some problems arise when I want to take things to the next level (which given my little experience with HTML is still quite low).

This is my table:

<table id="Passo1" style="border:5px solid rgba(0, 0, 0, 0.7);border-radius: 10px; background-color:rgba(0, 0, 0, 0.5); text-shadow:0.5px black; color: white" width="400px" class="send">
    <th colspan="20px"  class="centra_crl"><font size="20px"> Enviar relatório </font></th>
</tr>
<tr>
    <td class="centra_crl"> A enviar o relatório do carro para a sua oficina... </td>
</tr>
<tr></tr>
</table>

I want my table to start hidden. For that I use:

document.getElementById("Passo1").style.display="none";

And the class "centra_crl" is:

.centra_crl{
  text-align: center;
}

If I don't hide the table when the page is loaded, everything is fine. All the text is placed in the center. The problem is that when I start it hidden and then show it, the text seems to lose the "center" property, showing up placed to the left. Also, what's strange is that if I replace the text later with this

function sendReport2(){
           var el = document.getElementById('Passo1');
            el.rows[1].cells[0].innerHTML = "Concluído! Verifique no calendário a data da sua próxima visita.";
}

both the th and the td appear in the correct position. It seems like the center property isn't doing anything to the table when I show it.

Do you guys have any idea of what could be the problem? I suspect it might be a really stupid thing, but I can't seem to figure it out.

I apologize in advance if I didn't write this post correctly. I'm not a regular here and always get confused with the spacing.

Thanks!

Answer 1

The basic problem is that td elements only take up as much width as they have to. In other words, in the absence of other table content or style instructions, your td is only going to be as wide as the content it contains.

You've got the right idea using CSS in some places, but you've got a few things you'll want to fix:

• As mentioned in the comments, don't use tables for layout; use CSS instead. If you are actually displaying tabular data, go for it, but your code example looks like layout rather than data.
• The font tag has been deprecated for a while. Use CSS to control all aspects of your documents presentation, including font family, size, weight, color, etc.
• It's generally bad practice to use inline styles, since it's much harder to manage those styles and override them with other rules elsewhere. Try centralizing all of your styles in a style block in your document's header, or in a separate stylesheet that you reference from a link element.
• Rather than using JavaScript to hide an element, if you want something to start off hidden, apply a CSS rule of display: none to its associated class. Once it's loaded and you've done whatever processing you wish, you can use JavaScript to add or change the class of the table to something that displays as you want it to.

All in all, you need to spend some time learning HTML and CSS before you go too much further. There are a lot of errors in this example that are going to come back to haunt you later if you don't spend the time learning the right way now.

Answer 2

What are you doing to show the table? Does a user click a button to alter the display:none property?

CSS is rendered when the page loads, since the table isn't displaying when the page loads, it may not be getting the style applied to center the text.

You might wish to add the center class to your table in the same click that causes the table to show on the page. This may be your issue, if this does not work, please provide a lave example if possible or a jsfiddle.