Ya sabes crear la estructura básica de una tabla HTML, así que el siguiente paso es configurar su tamaño para distribuir la información dentro de la página Web o un post. Para ello usamos el atributo Width que regula el ancho de la tabla y de cada una de las celdas. Para las líneas no podemos usar este atributo, ya que todas las líneas tienen que coincidir con el ancho de la tabla. La dificultad la tenemos en que existen diferentes dimensiones para las pantallas, de forma que no todos verán igual la información de nuestro blog o página Web. Así que tenemos que decidir si queremos que el ancho de la tabla y las celdas tenga un tamaño relativo (medido en un %) o absoluto (medido en pixeles).
ANCHO ABSOLUTO: El tamaño de la tabla y las celdas es fijo. Se mide en píxeles y si cambias el diseño del blog o la página Web, no cambiará. Así puedes crear una tabla de 750 píxeles, en la que la primera columna tiene un tamaño de 300px, la segunda de 350px y la tercera de 100px. O puedes configurarlo para que todas tengan la misma anchura. El código en HTML para la tabla es:
<table border="1" style="width: 600px;"><tbody>
<tr> <td style="width: 200px;">Texto 1 </td> <td style="width: 100px;">Texto 2 </td> <td style="width: 300px;">Texto 3 </td> </tr>
<tr> <td>Texto 1 </td> <td>Texto 2 </td> <td>Texto 3 </td> </tr>
<tr> <td>Texto 1 </td> <td>Texto 2 </td> <td>Texto 3 </td> </tr>
</tbody> </table>
Y este sería su efecto.
| Texto 1 | Texto 2 | Texto 3 |
| Texto 1 | Texto 2 | Texto 3 |
| Texto 1 | Texto 2 | Texto 3 |
Fíjate que sólo defino la anchura para la primera línea, ya que el resto de celdas se “contagian” y aunque coloques otros valores no sirve de nada. Todas las celdas de la tabla emplean el ancho de las celdas de la primera fila. Si quieres una estructura irregular, entonces has de usar los atributos que te permiten unir celdas.
ANCHO RELATIVO: Hay varias formas de hacerlo, vamos a verlas una a una.
Tabla con ancho fijo y celdas en %. En el siguiente ejemplo la tabla es de 600px, y las celdas ocupan un 20%, 20% y 60%. Fíjate que en total todas las celdas de la fila tienen que sumar el 100% de la tabla. Y de nuevo las dimensiones de la primera fila se contagian al resto. El código HTML de la tabla se escribe así.
<table border="1" style="width: 600px;"><tbody>
<tr> <td style="width: 20%;">Texto 1 </td> <td style="width: 20%;">Texto 2 </td> <td style="width: 60%;">Texto 3 </td> </tr>
<tr> <td>Texto 1 </td> <td>Texto 2 </td> <td>Texto 3 </td> </tr>
<tr> <td>Texto 1 </td> <td>Texto 2 </td> <td>Texto 3 </td> </tr>
</tbody> </table>
Y este sería su efecto.
| Texto 1 | Texto 2 | Texto 3 |
| Texto 1 | Texto 2 | Texto 3 |
| Texto 1 | Texto 2 | Texto 3 |
La diferencia de usar valores relativos en la anchura de las celdas, es que si cambiamos la anchura de la tabla en el código HTML a 400px, veremos que esta se hace más pequeña pero que se mantienen las proporciones.
| Texto 1 | Texto 2 | Texto 3 |
| Texto 1 | Texto 2 | Texto 3 |
| Texto 1 | Texto 2 | Texto 3 |
Tabla con ancho en % y celdas en %. En este caso el tamaño de la tabla es variable y depende del espacio donde esté incrustado. Si le damos un porcentaje del 50% y lo incrustamos en un post, nos ocupará la mitad del espacio de la entrada. Si hacemos lo mismo en una página Web, ocupara el 50% de la anchura del sitio. Un ejemplo, vamos a insertar una tabla que ocupe el 50%. Luego las celdas ocupan un 20%, 20% y 60%. Se escribe así.
<table border="1" style="width: 50%;"><tbody>
<tr> <td style="width: 20%;">Texto 1 </td> <td style="width: 20%;">Texto 2 </td> <td style="width: 60%;">Texto 3 </td> </tr>
<tr> <td>Texto 1 </td> <td>Texto 2 </td> <td>Texto 3 </td> </tr>
<tr> <td>Texto 1 </td> <td>Texto 2 </td> <td>Texto 3 </td> </tr>
</tbody> </table>
| Texto 1 | Texto 2 | Texto 3 |
| Texto 1 | Texto 2 | Texto 3 |
| Texto 1 | Texto 2 | Texto 3 |
La principal diferencia es que con este código el tamaño depende de la página donde está insertado, si el ancho del blog también está definido en % y en un sitio que se adapta al monitor de los usuarios, entonces la tabla se verá más grande en los monitores de 25 pulgadas y más pequeño en los laptop. Si el blog tiene un ancho fijo (es lo más usual), las dimensiones de la tabla HTML y sus celdas, sólo varían en el caso en que cambies el diseño del blog. Si amplias la columna de los posts, también crecerá la tabla, y si la estrechas menguará en la misma proporción. Otra ventaja es que escribir en porcentajes resulta para los novatos más intuitivo que dar un valor de píxeles, por suerte en las entradas de Blogger puedes ver el resultado antes de publicarlo y rectificar hasta conseguir el resultado que quieres. Si has cogido la idea, te toca probar y experimentar, porque es la única forma de aprender a hacer tablas en HTML.
Imagen: en dominio público. Autor: Frits Ahlefeldt
que comando puedo usar si quiero tener celdas de diferente tamaños solo una celda difrerrnte alos dems
ResponderEliminarSe puede hacer fundiendo varias celdas en una.
Eliminar