1

Si tengo:

#principales td{

margin: 20px;

}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<table>
     <table align="center">
    <td><b>Simbolos matemáticos</b></td>
  </table>
  <tr id="principales"> 
    <td>Simbolo</td>
    <td>Nombre</td>
    <td>Significado</td>
  </tr>
  
  </table>
</body>
</html>

En el código CSS, programé:

#principales td{
margin:20px;
}

Por qué no es aplicado el margen a todos los <td> ?

2 respuestas 2

2

No estás creando la tabla con la estructura correcta, estás agregando una tabla dentro de otra tabla sin utilizar tr ni td, entonces el navegador al interpretar eso te crea una tabla distinta a la que esperas sin el id="principales".

Además si quieres agregar un encabezado a la tabla lo mejor es usar th.

El siguiente código resuelve tu problema:

#principales td{
    padding: 20px;
    background-color: #ccc;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<table border="1">
    <tr>
        <th colspan="3">Simbolos matemáticos</th>
    </tr>
    <tr id="principales"> 
        <td>Simbolo</td>
        <td>Nombre</td>
        <td>Significado</td>
    </tr>
</table>
</body>
</html>

3
  • que hace colspan?
    – ESCM
    el 8 sep. 2017 a las 14:42
  • Es para que el th utilice 3 celdas de la tabla, de esta manera se mostrará sobre las celdas Simbolo, Nombre, Significado. Si lo remueves, el th utilizará una sola celda y se mostrará sólo sobre Simbolo.
    – Jemonge
    el 8 sep. 2017 a las 16:32
  • Modifiqué el código para que muestre los bordes de las celdas, tal vez así te sea más claro lo que hace.
    – Jemonge
    el 8 sep. 2017 a las 16:35
0

#principales div{
    margin: 20px;
    background-color: #ccc;
    display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div>
    <div align="center" colspan="3"><b>Simbolos matemáticos</b></div>
    <div id="principales"> 
        <div>Simbolo</div>
        <div>Nombre</div>
        <div>Significado</div>
    </div>
</div>
</body>
</html>

corrijo, no uses tablas ya que pueden dar esos problemas, si quieres conservar la tabla prueba con usar padding en vez de margin

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.