Foros del Web - Ver Mensaje Individual

emprear · #3 (**permalink**) 23/11/2011, 06:39

Dos variantes

Código HTML:

Ver original<!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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body> 
<table width="100%" border="1"> 
    <colgroup> 
        <col width="5%" /><col width="5%" /> 
        <col width="5%" /><col width="5%" /> 
        <col width="5%" /><col width="5%" /> 
        <col width="5%" /><col width="5%" /> 
        <col width="5%" /><col width="5%" /> 
        <col width="5%" /><col width="5%" /> 
        <col width="5%" /><col width="5%" /> 
        <col width="5%" /><col width="5%" /> 
        <col width="5%" /><col width="5%" /> 
        <col width="5%" /><col width="5%" /> 
    </colgroup> 
    <tr> 
        <td colspan="5">25</td> 
        <td colspan="10">50</td> 
        <td colspan="5">25</td> 
    </tr> 
    <tr> 
        <td colspan="10">50</td> 
        <td colspan="6">30</td> 
        <td colspan="4">20</td> 
    </tr> 
</table> 
</body> 
</html>

La solución más común y facil es usar una tabla anidada

Código HTML:

Ver original<!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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
td {
text-align: center;
}
/*]]>*/
</style>
</head>
<body>
<table border="1">
<tr>
<td width="200">a</td>
<td width="200">botonera</td>
<td width="200">c</td>
</tr>
 
<tr>
<td colspan="3">
 
<table border="1">
<tr>
<td width="300">d</td>
<td width="100">e</td>
<td width="300">f</td>
</tr>
</table>
 
</td>
</tr>
</table>
</body>
</html>

Saludos