Как создать полноразмерные HTML-таблицы?(Без полей, Полное окно) - PullRequest
Новая
       24

Как создать полноразмерные HTML-таблицы?(Без полей, Полное окно)

2 голосов
/ 19 марта 2011

Я хочу создать базовый макет из двух столбцов в HTML с таблицей, но я хочу, чтобы таблица «занимала» ПОЛНУЮ СТРАНИЦУ.без полей («пробелы» между границами и окном браузера), позвольте мне быть более ясным на примере: 

<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>

Как вы можете видеть, у нас есть зеленая таблица с черной боковой панелью и красными границами, все на белом фоне.Дело в том, что я хочу, чтобы границы были «абсолютными» без пробелов между окном браузера пользователя и им.Я хочу, чтобы таблица занимала всю страницу без пробелов, «полей» или чего-либо еще, извините за избыточность.

Как я могу это сделать?

Ответы [ 2 ]

2 голосов
/ 19 марта 2011

Это должно сделать это: 

<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>
0 голосов
/ 19 марта 2011

@ RDL: Да, я также нашел другой способ сделать это, вот пример кода (комментарии на испанском): 

<!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. Спасибо за вашу помощь, ваш метод тоже это сделал;)

...