How to Create Full size HTML Tables? (No margins, Full Window)
I want to create a basic two columns layout in HTML with a table, but I want the table to "occupy" the FULL PAGE. without margins ("white spaces" between borders and browser's window), let me be more clear with an example:
<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 bo开发者_如何学Gorder="4" width="100%" height="567" style="border-collapse: collapse; border: 3px solid #FF0000" bordercolorlight="#FF0000">
<tr>
<td bgcolor="#008080"> </td>
<td width="160" bgcolor="#000000"> </td>
</tr>
</table>
</body>
</html>
As you can see there, we have a green table with a black sidebar and red borders, all on top of a white background. The thing is, I want the borders to be "absolute" without having white space between user's browser window and them. I want the table to occupy the Full Page without spaces or "margins" or whatever they are, sorry for being redundant.
How can I do that?
This should do it:
<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"> </td>
<td class="sidebar"> </td>
</tr>
</table>
</body>
</html>
I also found another way to do it, here's the sample code (Comments in Spanish):
<!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>
加载中,请稍侯......
精彩评论