Foros del Web - Ver Mensaje Individual

C2am · #4 (**permalink**) 09/02/2012, 12:25

Bien, entonces habrá que simular una tabla con div o span.
Una alternativa, sin usar display: table etc.

Código HTML:

Ver original<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Documento sin título</title>
<style>
#tabla{
    width:600px;
    border:1px solid #666;
    font-size:16px;
    color:#FFE4B5;
    background:#CCC;
    }
#fila{
    height:30px;
    width:100%;
    clear:left;
    border:1px solid #0C9;
    }   
#sexo, #nombre, #apellido
    {
    background-color:#8B0000;
    margin:1px;
    padding:2px;
    }
#sexo{
    float:left;
    width: 80px;
    }
#nombre{
    width: 250px;
    float:left;
    }   
 
#apellido{
    float:left;
    width: 250px;
        }   
 
</style>
 
</head>
 
<body>
 
<div id="tabla">
 
<p id="fila">
<span id="sexo">Hombre </span>
<span id="nombre">Marcelo José</span>
<span id="apellido"> Arraymonn Juarez</span>
</p>
 
<p id="fila">
<span id="sexo">Mujer </span>
<span id="nombre">Marcelo José</span>
<span id="apellido"> Arraymonn Juarezasasasasa</span>
</p>
<p id="fila">
<span id="sexo">Hombre </span>
<span id="nombre">Marcelo José Antonio</span>
<span id="apellido"> Arraymonn </span>
</p>
 
<p id="fila">
<span id="sexo">Hombre </span>
<span id="nombre">Marcelo José</span>
<span id="apellido"> Arraymonn Juarez</span>
</p>
 
<p id="fila">
<span id="sexo">Mujer </span>
<span id="nombre">Marcelo José</span>
<span id="apellido"> Arraymonn Juarezasasasasa</span>
</p>
<p id="fila">
<span id="sexo">Hombre </span>
<span id="nombre">Marcelo José Antonio</span>
<span id="apellido"> Arraymonn </span>
</p>
 
</div>
</body>
</html>

Investiga sobre display:table

Los estilos que están en un archivo externo .css o que están es el encabezado (ejemplo que te dí) también pueden ir en estilos en linea dentro de cada etiqueta, solo debes poner los que corresponden a cada elemento en particular.
Es necesario aclarar que esto de poner <etiqueta style "blabla" no es aconsejable, porque rompe con el esquema de separación de diseño-contenido. Además estás usando php, lo cual añade mas enredo a toda la situación. Cuando tengas que cambiar algo será un dolor de cabeza.

Manuales css puedes encontrar en www.librosweb.es

Si te están enseñando así, pues la verdad no es la mejor manera de aprender. Si en cambio solo se trata de un ejercicio para aplicar los conocimientos y ver de las posibilidades del css, pues bien.

Saludos