HTML5 e atributo" style"

Comecei agora a aprender esta nova e maravilhosa habilidade (HTML5) e estava tudo a correr bem até eu chegar ao estilo capaz. OK, eu sei que CSS é feito para isso, mas como é um pouco cedo demais para mim Eu uso atributo de estilo. OK, então eu escrevi esta tabela simples: 

<!Doctype html>

<html lang="es-es">

    <head>
        <meta charset="UTF-8">
        <title>First table</title>
        <meta name="author" content="Kamila Bertran">
    </head>

    <body>

        <table style=”border:1px solid #000; width:100%;”>

            <caption> Gastos mensuales </caption>

            <thead>
            <tr>
                <td style=”border:1px solid #000; width:100%;”> Producto </td>
                <td style=”border:1px solid #000; width:100%;”> Unidades </td>
                <td style=”border:1px solid #000; width:100%;”> Precio </td>
                <td style=”border:1px solid #000; width:100%;”> Total </td>
            </tr>
            </thead>

            <tfoot>
            <tr>
                <td colspan=2 style=”border:1px solid #000; width:100%; align:center;”> Año 2014</td>
                <td style=”border:1px solid #000; width:100%;”> Total</td>
                <td style=”border:1px solid #000; width:100%;”> 142 </td>
            </tr>
            </tfoot> 

            <tbody>
            <tr>
                <td style=”border:1px solid #000; width:100%;”> Camisetas </td>
                <td style=”border:1px solid #000; width:100%;”> 10 </td>
                <td style=”border:1px solid #000; width:100%;”> 2 </td>
                <td style=”border:1px solid #000; width:100%;”> 20 </td>
            </tr>

            <tr>
                <td style=”border:1px solid #000; width:100%;”> Pantalones </td>
                <td style=”border:1px solid #000; width:100%;”> 3 </td>
                <td style=”border:1px solid #000; width:100%;”> 14 </td>
                <td style=”border:1px solid #000; width:100%;”> 42 </td>
            </tr>

            <tr>
                <td style=”border:1px solid #000; width:100%;”> Chaquetas </td>
                <td style=”border:1px solid #000; width:100%;”> 4 </td>
                <td style=”border:1px solid #000; width:100%;”> 20 </td>
                <td style=”border:1px solid #000; width:100%;”> 80 </td>
            </tr>
            </tbody>

        </table>

    </body>

</html>
E não posso desfazer e porque é que o meu atributo de estilo está a ser completamente ignorado. Ajudar?

Author: CNB, 2016-09-10
Source

3 answers

Tu usaste ( " ).Isto está errado.Você deve usar (") Assim. 

        <tr>
            <td style="border:1px solid #000; witdh:100%;"> Camisetas </td>
            <td style="border:1px solid #000; width:100%;"> 10 </td>
            <td style="border:1px solid #000; width:100%;"> 2 </td>
            <td style="border:1px solid #000; width:100%;"> 20 </td>
        </tr>

Também

 2
Author: Aslan Muhammad-Rza, 2016-09-10 17:12:17

Não é uma boa prática usar estilismo em linha. Optimizei o código com a utilização de CSS.

HTML:

<table class="tblBorder">
  <caption> Gastos mensuales </caption>
  <thead>
    <tr>
      <td class="tblBorder"> Producto </td>
      <td class="tblBorder"> Unidades </td>
      <td class="tblBorder"> Precio </td>
      <td class="tblBorder"> Total </td>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan=2 class="tblBorder center"> Año 2014</td>
      <td class="tblBorder"> Total</td>
      <td class="tblBorder"> 142 </td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td class="tblBorder"> Camisetas </td>
      <td class="tblBorder"> 10 </td>
      <td class="tblBorder"> 2 </td>
      <td class="tblBorder"> 20 </td>
    </tr>
    <tr>
      <td class="tblBorder"> Pantalones </td>
      <td class="tblBorder"> 3 </td>
      <td class="tblBorder"> 14 </td>
      <td class="tblBorder"> 42 </td>
    </tr>
    <tr>
      <td class="tblBorder"> Chaquetas </td>
      <td class="tblBorder"> 4 </td>
      <td class="tblBorder"> 20 </td>
      <td class="tblBorder"> 80 </td>
    </tr>
  </tbody>
</table>
</body>
</html>

CSS: 

.tblBorder
{
  border:1px solid #000; width:100%;
}
.center
{
 align:center;
}
 1
Author: Kumar_Vikas, 2016-09-10 17:24:08 

<head>
    <meta charset="UTF-8">
    <title>First table</title>
    <meta name="author" content="Kamila Bertran">
    <style>
    table{
        border:1px solid #000; width:100%;
    }
    td{
        border:1px solid #000; width:100%;
    }
    </style>
</head>

<body>

    <table>

        <caption> Gastos mensuales </caption>

        <thead>
        <tr>
            <td> Producto </td>
            <td> Unidades </td>
            <td> Precio </td>
            <td> Total </td>
        </tr>
        </thead>

        <tfoot>
        <tr>
            <td colspan=2 align="center"> Año 2014</td>
            <td> Total</td>
            <td> 142 </td>
        </tr>
        </tfoot> 

        <tbody>
        <tr>
            <td> Camisetas </td>
            <td> 10 </td>
            <td> 2 </td>
            <td> 20 </td>
        </tr>

        <tr>
            <td> Pantalones </td>
            <td> 3 </td>
            <td> 14 </td>
            <td> 42 </td>
        </tr>

        <tr>
            <td> Chaquetas </td>
            <td> 4 </td>
            <td> 20 </td>
            <td> 80 </td>
        </tr>
        </tbody>

    </table>

</body>

No HTML align is attribute. Então você pode fazer alinhar= "centro" e em vez de escrever na linha css você pode direita interna Ou Externa CSS com o uso de classe ou elemento HTML name.So essa linha de código vai ser reduzida.

 0
Author: Rashmi Nalwaya, 2016-09-10 17:59:52