How to align the Left fields of an Html table?

Question

I cannot align my Labels (Razor) to the left of my html table with Visual Studio!

<table cellspacing="6">        
    <tr >
        <td >
            @Html.Label("Cep: ")
        </td>            
          <td  >
            @Html.Label("Endereco: ")

          </td>
        <td >
            @Html.Label("Número: ")
        </td>
    </tr>

    <tr>
        <td >
            @Html.TextBoxFor(e => e.CEP, new { maxlength = "9", id = "Cep", name = "Cep", onchange = "findCEP()" })
        </td>

        <td >
            @Html.TextBoxFor(e => e.DescricaoEndereco, new { maxlength = "50", id = "Endereco", name = "Endereco" })
        </td>

        <td>
            @Html.TextBoxFor(e => e.Numero, new { maxlength = "50", id = "Numero", name = "Numero" })
        </td>
    </tr>
    <tr>
        <td >
            @Html.Label("Complemento: ")
        </td>
    </tr>
    <tr>
        <td >
            @Html.TextBoxFor(e => e.Complemento, new { maxlength = "50", id = "Complemento", name = "Complemento" })
        </td>
    </tr>
    <tr>
        <td >
            @Html.Label("UF: ")
        </td>

        <td >
            @Html.Label("Cidade: ")

        </td>
        <td >
            @Html.Label("Bairro: ")
        </td>
    </tr>
    <tr>
        <td>
            @Html.DropDownListFor(e => e.UF, Model.UFList, new { id = "UF", name = "UF" })
        </td>
        <td>
            @Html.TextBoxFor(e => e.Cidade, new { maxlength = "40", id = "Cidade", name = "Cidade" })
        </td>
        <td>
            @Html.TextBoxFor(e => e.Bairro, new { maxlength = "50", id = "Bairro", name = "Bairro" })
        </td>
    </tr>

</table>

Answer 1

Text is already left aligned by default.
However if you want to align all text within the table to left you can use the following:

<table cellspacing="6" style="text-align:left;"> ... </table>

To align all table text to right, uses:

<table cellspacing="6" style="text-align:right;"> ... </table>

To align just right td/tr of the table, creates a class or a id with the name you want, and implement it in the CSS code by applying the style text-align:left; and also in the marking code as in the example below:

<!-- Código CSS -->
<style>
.alinhadoEsquerda {text-align:left;}
.alinhadoCentro {text-align:center;}
.alinhadoDireita {text-align:right;}

.textoRealce-E {color:#2C55FF;}
.textoRealce-C {color:green;}
.textoRealce-D {color:red;}

td {padding: 8px; border: 1px solid #E4E4E4;}
</style>

<!-- Código da Tabela -->
<table cellspacing="6">        
    <tr>
        <td class="alinhadoDireita">
            <span class="textoRealce-D">Alinhado à direita</span>
            @Html.Label("Cep: ")
        </td>            
        <td class="alinhadoEsquerda">
            <span class="textoRealce-E">Alinhado à esquerda</span>
            @Html.Label("Endereco: ")
            
        </td>
        <td class="alinhadoCentro">
            <span class="textoRealce-C">Alinhado ao centro</span>
            @Html.Label("Número: ")
        </td>
    </tr>
</table>

Note: In the example above I put the whole CSS and HTML code together on purpose because I have a hunch and something tells me that you are create this without using a stylesheet.

But the best way to do this would be to put the CSS code within a stylesheet to separate the HTML code from the CSS because that’s why the style sheets were created.

Answer 2

Instead of having to add a class for each td tag, you can put a class inside the table tag

<table cellspacing="6" class="align-left">

and in css

.align-left td{
    text-align: left;
}

this means that every td tag that is inside a table tag that has the align-left class will receive the left text alignment.

Answer 3

You can create a class CSS, as follows:

.alinhamento {
  text-align: left;
}

And then add this class to the elements td, manually via HTML or via Asp.NET-MVC (which I am not aware of and do not know if you can perform such a task).

Answer 4

Have you ever tried to create a classe in the CSS and place these classes in the labels?
For example:

.alinha_a_esquerda{
    text-align:left;
}

And put it in HTML:

<label class="alinha_a_esquerda">...</label>

Answer 5

A way would be like this:

<td class="left-align">@Html.Label("Cep: ")</td>

You need a class css:

.left-align { text-align: left; }

But you don’t need to use a label in this case. Consider using @Html.DisplayFor(m => m.Field) using the value of the attribute [Display] class. That way, if you need to change the model display your view will reflect this change.

If you consider it strictly necessary to use a label, then you can use the @Html.LabelFor(m => m.Field)

In class:

public class Cliente 
{
    [Display(Name = "Número")]
    public string Numero { get; set; }
...

And your HTML file:

<table cellspacing="6">        
    <tr>
        <td class="left-align">
            @Html.DisplayFor(m => m.CEP)
        </td>            
         <td class="left-align">
            @Html.DisplayFor(m => m.DescricaoEndereco)    
          </td>
        <td class="left-align">
            @Html.DisplayFor(m => m.Numero)
        </td>
    </tr>
...