viernes, 9 de diciembre de 2016

Tabla Fraccionada

Haciendo un proyecto intente poner una celda centrada dentro de una tabla en HTML, Soy consciente que esto no es JS pero HTML y JS van juntos decidí meterlo aquí.
Quería un botón y un cuadro de texto dentro en medio de la tabla y buscando en Internet no encontré nada que te explicasen como hacerlo.

El codigo:

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>Tabla fracionada</title>  
 </head  
 <body>  
 <table WIDTH=1000 border="2px">  
      <tr>  
           <td WIDTH="300" HEIGHT="200"></td>  
           <td WIDTH="100" HEIGHT="100"></td>  
           <td WIDTH="100" HEIGHT="100"></td>  
           <td WIDTH="300" HEIGHT="200"></td>  
      </tr>  
      <tr>  
                <td WIDTH="100" HEIGHT="100"></td>  
                <td WIDTH="100" HEIGHT="100" rowspan="2" COLSPAN="2"></td>  
                <td WIDTH="100" HEIGHT="100"></td>  
      </tr>  
      <tr>  
                <td WIDTH="100" HEIGHT="100"></td>  
                <td WIDTH="100" HEIGHT="100"></td>  
      </tr>  
      <tr>  
                <td WIDTH="300" HEIGHT="200"></td>  
                <td WIDTH="100" HEIGHT="100"></td>  
                <td WIDTH="100" HEIGHT="100"></td>  
                <td WIDTH="300" HEIGHT="200"></td>  
      </tr>  
 </table>  
 </body>  
 </html>  


 Lo que hace este código es esto:


Espero que les haya servido para sus programas porque hacer desde cero es algo complicado.





2 comentarios:

  1. Hola Alejandro,
    Hace mucho tiempo se usaban las tablas para posicionar elementos en una página web, pero eso pasó a la histora con la introducción de la especificación CSS (Cascading Style Sheets). En concreto la especificación oficial que hoy en día se utiliza es CSS 3. Quizás por eso no has encontrado información al respecto usando tablas :-)
    Las tablas sólo se deben usar para mostrar datos de forma tabular, y no para posicionar elementos dentro de la página.
    En CSS3 existe una propiedad llamada flexbox para posicionar elementos dentro de un recinto (div). Aquí tienes un curso de flexbox: http://www.flexboxdefense.com/ para aprender jugando. En tu caso concreto hay otras formas de usar CSS para centrar algo de forma vertical y horizontal: http://howtocenterincss.com/
    Aunque lo mejor quizás es que te familiarices con CSS en general primero.

    ResponderEliminar
    Respuestas
    1. Muchas gracias Ángel, intentare implementarlo en futuros programas. ;)

      Eliminar