html - tablas - procedimiento para combinar celdas en power point
¿Cómo eliminar el espacio no deseado entre filas y columnas en la tabla? (11)
¿Cómo elimino el espacio adicional entre las filas y columnas en la tabla?
Intenté cambiar el margen, el relleno y varias propiedades de borde en la tabla y tr y td.
Quiero que las imágenes estén todas una al lado de la otra para que parezcan una imagen grande.
¿Cómo debo solucionar esto?
CSS
table {
border-collapse: collapse;
}
HTML
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tera Byte Video Game Creation Camp</title>
<link rel="stylesheet" type="text/css" href="style.css"></link>
</head>
<body>
<table class="mytable" align="center">
<tr class="header">
<td colspan="3"><img src="images/home_01.png" /></td>
</tr>
<tr class="top">
<td colspan="3"><img src="images/home_02.png" /></td>
</tr>
<tr class="link-row">
<td><img src="images/home_03.png" /></td>
<td><img src="images/home_04.png" /></td>
<td><img src="images/home_05.png" /></td>
</tr>
<tr class="link-row">
<td><img src="images/home_07.png" /></td>
<td><img src="images/home_06.png" /></td>
<td><img src="images/home_08.png" /></td>
</tr>
<tr class="link-row">
<td><img src="images/home_09.png" /></td>
<td><img src="images/home_10.png" /></td>
<td><img src="images/home_11.png" /></td>
</tr>
<tr class="link-row">
<td><img src="images/home_12.png" /></td>
<td><img src="images/home_13.png" /></td>
<td><img src="images/home_14.png" /></td>
</tr>
<tr class="bottom">
<td colspan="3"><img src="images/home_15.png" /></td>
</tr>
</table>
</body>
</html>
¿Has intentado eliminar los TRs que tienen un colspan y ver si esto cambia algo?
He experimentado colspans y rowspans que son bastante desagradables cuando se trata de diseños de tablas precisos. Si sus imágenes se ven bien sin los colspan-TRs, comenzaría desde allí y construiría un conjunto de tablas anidado.
Además, su style.css no parece estar completo, ¿tal vez hay algo mal allí? Al menos agregaría padding: 0; margin: 0; padding: 0; margin: 0; a la mesa (o a la clase "mytable"). Asegúrese de que sus imágenes no tengan espacios ni bordes (por ejemplo, agregando img { border: 0; } a su hoja de estilo).
Agregar a la respuesta de vectran: también debe establecer el atributo de cellspacing en el elemento de la tabla para la compatibilidad entre navegadores.
<table cellspacing="0">
EDITAR (en aras de la exhaustividad lo ampliaré 5 años después :):
Internet Explorer 6 e Internet Explorer 7 requieren que establezca el cellspacing directamente como un atributo de tabla, de lo contrario, el espaciado no se desvanecería.
Internet Explorer 8 y versiones posteriores y todas las demás versiones de navegadores populares - Chrome, Firefox, Opera 4+ - admiten el border-spacing propiedad CSS.
Por lo tanto, para restablecer el espacio entre celdas de la tabla entre navegadores (que admite IE6 como navegador de dinosaurios), puede seguir el siguiente ejemplo de código:
table{
border: 1px solid black;
}
table td {
border: 1px solid black; /* Style just to show the table cell boundaries */
}
table.no-spacing {
border-spacing:0; /* Removes the cell spacing via CSS */
border-collapse: collapse; /* Optional - if you don''t want to have double border where cells touch */
}
<p>Default table:</p>
<table>
<tr>
<td>First cell</td>
<td>Second cell</td>
</tr>
</table>
<p>Removed spacing:</p>
<table class="no-spacing" cellspacing="0"> <!-- cellspacing 0 to support IE6 and IE7 -->
<tr>
<td>First cell</td>
<td>Second cell</td>
</tr>
</table>
Agregue este restablecimiento de CSS a su código CSS: ( Desde aquí )
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '''';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
Se restablecerá el CSS de manera efectiva, eliminando el relleno y los márgenes.
Esto funcionó para mí:
#table {
border-collapse: collapse;
border-spacing: 0;
}
Para imágenes en td, use esto para imágenes:
display: block;
Eso elimina espacio no deseado para mí
Para los estándares que cumplen con HTML5, agregue todo este CSS para eliminar todo el espacio entre las imágenes en las tablas:
table {
border-spacing: 0;
border-collapse: collapse;
}
td {
padding:0px;
}
td img {
display:block;
}
Prueba esto,
table{
border-collapse: collapse; /* ''cellspacing'' equivalent */
}
table td,
table th{
padding: 0; /* ''cellpadding'' equivalent */
}
Solo agregando encima de la respuesta de Jacob, para img en td ,
body {line-height: 0;}
img {display: block; vertical-align: bottom;}
Esto funciona para la mayoría de los clientes de correo electrónico, incluido Gmail. Pero no Outlook. Para outlook, necesita hacer dos pasos más:
table {border-collapse: collapse;}
y establece que todos los elementos td tengan la misma height y width que las imágenes que contienen. Por ejemplo,
<td width="600" height="80" style="line-height: 80px;">
<img height="80" src="http://www.website.com/images/Nature_01.jpg" width="600" />
</td>
agregando esta línea al comienzo del archivo funcionó para mí:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
modificar el css para establecer las propiedades adecuadas del borde no funcionó hasta que agregué la línea anterior
establecer Cellpadding y cellspacing en 0 eliminará el espacio innecesario entre filas y columnas ...
table
{
border-collapse: collapse;
}
colapsará todas las fronteras que separan las columnas de la tabla ...
o tratar
<table cellspacing="0" style="border-spacing: 0;">
haga todo el espaciado de celdas a 0 y el espaciado de bordes 0 para lograr lo mismo.
¡pasarlo bien!