que - tablas html avanzado
No se puede poner el margen en la etiqueta<td> sin CSS ni el atributo de espacio de celdas (7)
Así que descubrí una manera simple de resolver el problema sin ningún problema.
digamos que tienes
<tr><td>This is an example</td></tr>
Poner encapsular todos los datos en un
etiqueta como esta
<tr><td><p>This is an example</p></td></tr>
y luego dar el
etiqueta un margen izquierdo de cualquier valor que quieras, digamos
<tr><td><p style="margin-left:4px;">This is an example</p></td></tr>
Hace la magia por mi sin ninguna molestia.
Por el motivo que sea, no he podido obtener ninguna celda de la tabla para tener margen entre ellas. Quiero que las celdas de la tabla tengan un color de fondo gris (sobre el fondo de una página en blanco) para que se vean como azulejos con blanco entre ellas.
Lo intenté en el HTML,
<table cellspacing="3">
También en el CSS,
table td {
margin:3px;
}
Nada funciona. Las células todavía están pegadas, como una gran mancha gris. ¿Me estoy perdiendo algo muy muy básico aquí?
Aquí está el código real:
<table width="100%" cellspacing="3">
<tr>
<th>Document Number</th>
<th>BP Reference No.</th>
<th>Posting Date</th>
<th>Posting Week</th>
<th>Customer/Vendor Code</th>
<th>Customer/Vendor Name</th>
<th>Item No.</th>
<th>Item/Service Description</th>
<th>Item Group</th>
<th>Warehouse Code</th>
<th>Remaining Open Quantity</th>
<th>Line No.</th>
<th>Sales Employee Name</th>
<th>Stock</th>
<th>Fill Rate</th>
<th>1046</th>
<th>1047</th>
<th>1048</th>
<th>1049</th>
<th>1050</th>
<th>1051</th>
<th>1052</th>
<th>1053</th>
<th>1054</th>
<th></th>
</tr>
<tr>
<td>17272</td>
<td>2244100</td>
<td>5/24/2010</td>
<td>22</td>
<td>NYST</td>
<td>NYSTROM INC.</td>
<td>NYM118SX26DSTKS01</td>
<td>Nystrom, Mort. 1-1/8'''', Schl C~K, US26D, ST cam, 5pin, KS #43758</td>
<td>Mort Cylinders</td>
<td>US1</td>
<td>1000</td>
<td>3</td>
<td>KRE Management 1</td>
<td>0</td>
<td>100</td>
<td>1000</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td></td>
</tr>
</table>
Creo que el cellspacing toma el mismo color que el color de fondo de la tabla.
Así que tienes dos opciones:
1. Aplique el color de fondo a la td s en lugar de a la <table> sí.
2. Es posible que desee utilizar un borde blanco ( border para <td> con un border-collapse: collapse para la tabla)
Esta es una solución cruda, pero funciona.
Si crea una <table> con un margen del tamaño que desea ... que contenga su existente, utilizando el mismo fondo o color, puede establecer que el margen de la tabla exterior sea lo que desee.
Si tiene una serie de elementos <TD> , cree una <table> dentro de la <TD> que quiera tener un margen y, de nuevo, asegúrese de que tanto la <table> externa como la <TD> interna tengan el mismo fondo o color .
ejemplo de mi blog en http://harrolds.blogspot.com que incrusta un script para mostrar citas ...
Mesa principal
<table width="100%" bgcolor="lightblue" border=1>
<tbody>
<tr>
<td align="left" width="160"><span style="font-family:Times New Roman;font-size: -1;"><small><a href="http://en.wikipedia.org/wiki/Zell_Miller" target="_new">Sen. Zell Miller</a> <small>(D-GA) RNC''04</small></small></span><br /><object width="120" height="106"><param name="movie" value="http://www.youtube-nocookie.com/v/b4GqdfRJf5E&hl=en&fs=1&border=1" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube-nocookie.com/v/b4GqdfRJf5E&hl=en&fs=1&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="120" height="106"></embed></object><br /><font size="-1"><span style="color: blue; font-family: "sylfaen";><a href="http://www.harrold.org/rfhextra/support_our_Troops.html" target="_new"><b><small>Liberators & Defenders</small></b></a></span></font>
</td>
<td background="http://harrold.org/rfhextra/images/bgparchmentlight.jpg">
<table border=0>
<tr>
<td background="http://harrold.org/rfhextra/images/bgparchmentlight.jpg"><script language="javascript" src="http://www.harrold.org/rfhextra/quote.js" type="text/javascript"></script>
</td>
</tr>
</table>
</td>
<td align="right"><a href="http://www.cafepress.com/rightwingstuff" target="_new"><small><small>RightWingStuff</small></small></a><br /><a href="http://www.gadsdenandculpeper.com/" target="_new"><img src="http://harrold.org/rfhextra/images/GadsdenFlag98x130.gif" width="98" height="130" alt="link source http://www.cafepress.com/rightwingstuff" border="0" /></a>
</td>
</tr>
</tbody>
</table>
Hacer estilo td con bloque. Prueba esto,
<table width="100%" border="0" cellpadding="2" cellspacing="1">
<tbody>
<tr>
<td class="SlateGridDataError">Please Re-enter login information</td>
</tr>
</tbody>
</table>
.SlateGridDataError {
border-radius: 2px;
display: block;
font-size: 14px;
color: #999999;
display:block;
border: 1px solid #dd3c39;
border-left: 5px solid #dd3c39;
padding: 12px 5px;
margin-bottom: 20px;
cursor: default;
outline: none;
}
Intente agregar un td entre los dos TD que desea tener el margen. Configúrelo para que no tenga fondo (simplemente no ponga "fondo: algo;") y tenga el ancho que desee. Si desea poner un margen entre dos TR, solo agregue otro tr entre ellos y coloque un td con la altura que desea que tenga el margen. Incluso puede usar la misma clase para los TD y configurar el CSS solo una vez.
Si alguien todavía tiene este problema, intente esto en su hoja de estilo CSS:
table {
border-collapse: separate;
border-spacing: 10px 5px;
}
Los valores para el espaciado de los bordes son dos medidas de longitud. El valor horizontal viene primero y se aplica entre columnas. La segunda medida se aplica entre filas.
Si proporciona un valor, se utilizará tanto horizontal como verticalmente. La configuración predeterminada es 0, lo que hace que los bordes se dupliquen en la cuadrícula interna de la tabla.
Si está utilizando un restablecimiento de CSS al principio de su hoja de estilo, verifique si tiene el siguiente código.
table {
border-collapse: collapse;
}
Si ese es el caso, intente anularlo con:
border-collapse: separate;