bordes de table

fjmasero · #1 (**permalink**) 02/05/2004, 11:37

Wenas:

¿Como se hace con estilos el típico border de una table?.

Me explico, cuando se pone <table border="1"> se construye una tabla en la que se ven bordes en todas las celdas.

Sin embargo, con <table style=border: 1 solid #000000"> solo se visualiza un borde a toda la tabla, y no entre las celdas.

Lo que quiero es conseguir con estilos el primer efecto.

Me imagino que si se aplican estilos a las celdas, consigues lo mismo, pero me pregunto si no hay una forma de hacerlo sin tener que aplicar estilos a cada td.

Espero haberme explicado.

Salu2 y gracias.

orochies · #2 (**permalink**) 02/05/2004, 18:37

pues puedes acerlo de esta manera:

table,td {
border: 1px solid #000000;
}

Claro que esta forma es para acerlo en un archivo externo de css ... O para la cabecera deldocumento...

fjmasero · #3 (**permalink**) 03/05/2004, 01:56

Gracias por contestar orochies, pero tu solucíón no me vale, pq los estilos q defines lo q hace es poner borde a toda la tabla y borde a cada celda, de tal forma que entre celdas se duplican los bordes q están juntos.

Salu2

JavierB · #4 (**permalink**) 03/05/2004, 02:52

Hola, fjmasero.

Añade esto:

table {border-collapse: collapse}

Saludos,

fjmasero · #5 (**permalink**) 03/05/2004, 03:51

Gracias JavierB:

Ya lo había encontrado.

Pongo un código para q sirva de ejemplo

Código:

<HTML>
  <HEAD>
    <STYLE type="text/css">
      .tabla { border-collapse: collapse }
      .tabla td { border: 2px solid red }
      .tablaHija td { border: none }
    </STYLE>
  </HEAD>
  <BODY>
<table cellspacing="0" cellpadding="5" border="0" class="tabla">
<tr>
    <td>1</td>
    <td>
      <table cellspacing="2" cellpadding="2" border="0" class="tablaHija">
        <tr>
          <td>x</td>
          <td>x</td>
        </tr>
        <tr>
          <td>x</td>
          <td>x</td>
        </tr>
      </table>
    </td>
    <td>3</td>
    <td></td>
</tr>
<tr>
    <td>5</td>
    <td>6</td>
    <td></td>
    <td>8</td>
</tr>
<tr>
    <td>9</td>
    <td>10</td>
    <td></td>
    <td>12</td>
</tr>
<tr>
    <td>13</td>
    <td>14</td>
    <td>15</td>
    <td>16</td>
</tr>
</table>
<br>
<table cellspacing="0" cellpadding="10" border="0">
<tr>
    <td>a</td>
    <td>b</td>
</tr>
<tr>
    <td>c</td>
    <td>d</td>
</tr>
</table>

  </BODY>
</HTML>