Cómo Crear el tamaño de las Tablas en HTML? (Sin márgenes, Ventana Completa)

Quiero crear un básico de dos columnas de diseño en HTML con una tabla, pero quiero que la tabla de «ocupar» la PÁGINA COMPLETA. sin márgenes («espacios en blanco» entre fronteras y la ventana del navegador), permítanme ser más claro con un ejemplo:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Pagina nueva 4</title>
<meta name="Microsoft Theme" content="none">
</head>

<body>

<table border="4" width="100%" height="567" style="border-collapse: collapse; border: 3px solid #FF0000" bordercolorlight="#FF0000">
<tr>
    <td bgcolor="#008080">&nbsp;</td>
    <td width="160" bgcolor="#000000">&nbsp;</td>
</tr>
   </table>

   </body>

   </html>

Como puedes ver, tenemos una mesa verde con negro de la barra lateral y bordes rojos, todos en la parte superior de un fondo blanco. La cosa es que quiero que las fronteras para ser «absoluta», sin tener espacio en blanco entre el usuario de la ventana del navegador y ellos. Quiero la mesa para ocupar toda la Página sin espacios o «márgenes» o lo que sean, lo siento por ser redundante.

¿Cómo puedo hacer eso?

InformationsquelleAutor Jmlevick | 2011-03-19

2 Kommentare

  1. 2

    Esto debe hacerlo:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Pagina nueva 4</title>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      .container {
        width: 100%;
        min-height: 567px;
        padding: 0px;
        border: 3px solid #FF0000;
      }
      .container .content {
        background-color: #008080;
      }
      .container .sidebar {
        background-color: #000000;
        width: 160px;
      }
    </style>
    </head>
    
    <body>
    
    <table class="container">
    <tr>
        <td class="content">&nbsp;</td>
        <td class="sidebar">&nbsp;</td>
    </tr>
    </table>
    
    </body>
    
    </html>
  2. 0

    @RDL: Sí, también he encontrado otra manera de hacerlo, aquí está el código de ejemplo (Comentarios en español):

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Tabla ajustable al navegador y colunma fija de 200px</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
        overflow: auto;
    }
    #tabla {
        width: 100%;
        border-collapse: collapse;
        border: 1px solid #444;
        background-color: #ffc;
    }
    .celda_dcha {
        width: 200px;
        border: 1px solid #444;
        background-color: #cfc;
    }
    </style>
    </head>
    
    <body>
    <!-- los bordes y colores son para testar la maqueta -->
    <!-- este esquema se adapta a cualquier resolución de pantalla, conservando la columna de la derecha siempre los 200px -->
    <!-- probado en iexplorer 7 y 8, ff 3.6, opera 10 y safari 5 -->
    <table id="tabla">
        <tr>
            <td>Contenido</td>
            <td class="celda_dcha">Columna para imágenes</td>
        </tr>
    </table>
    </body>
    
    </html>

    P. S. Gracias por su ayuda, su método también lo hizo 😉

    • buen trabajo. Tenga cuidado con el ‘*’ en tu css. A veces puede tener efectos diferentes en los distintos navegadores, dependiendo de cómo se utiliza.
    • Otra pregunta: que el código Que he escrito ahí arriba funcionaba bastante bien… El único problema que estoy teniendo es que la barra lateral derecha no se ajuste a las diferentes resoluciones de pantalla, quiero decir, ajustar hasta «1080px» de altura aprox, pero cuando sale con 1200px la barra que separa desde el pie de página (Sí, tengo un pie de página demasiado) el lado izquierdo de la mesa no parece verse afectado en absoluto, se ve bien en todas las pantallas, el pie de página se ajusta a las resoluciones cambia demasiado, pero la barra lateral derecha o a la derecha «columna» de la tabla no ¿por qué? La esperanza puede ayudar.
    • Tendría que ver el código. Una tabla debe nunca «separar» a sí mismo al cambiar de navegador anchos. La tabla debe ampliar, pero la barra lateral no se hacen más grandes a lo ancho, ya que es fijado a un ancho fijo.
    • fue un Doctype problema, resuelto por mí mismo: goo.gl/hxdhH hay es la pregunta que se abrió para que el problema con la respuesta que he encontrado. Gracias! 😉

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea