0

Buenas quería crear una tabla, con sus títulos, y donde agrega contenido, pudiendo darle color, igual que la que se muestra en la imagen. Solo he conseguido lo que muestro en el ejemplo, y al escribir dentro las celdas se van alargando, y la intención es que las celdas tengan tamaño fijo, que abarquen casi todo el ancho de la página. Imagino que hará falta css, por que las tablas en si no me salen. Vean lo que conseguí, Gracias.

<!DOCTYPE html>
<html lang="en">
<head>

    <title>Tabla</title>
</head>
<body>
    <table class="egt">

        <caption>Consumo de combustible de los autos a lo largo de las pruebas de manejo</caption>
      
        <tr>
      
          <th scope="col">Car</th>
      
          <th>Enero</th>
      
          <th>Febrero</th>
      
          <th>Marzo</th>
      
        </tr>
      
        <tr>
      
          <th>Chevrolet Camaro</th>
      
          <td>1254 lts</td>
      
          <td>1582 lts</td>
      
          <td>685 lts</td>
      
        </tr>
      
        <tr>
      
          <th>Lamborghini Aventator</th>
      
          <td>1854 lts</td>
      
          <td>1978 lts</td>
      
          <td>1502 lts</td>
      
        </tr>
      
      </table>
</body>
</html>

1
  • 1
    Como bien has comentado, necesitarás CSS, puedes esperar a que algún compañero te eche un cable, pero de todas formas, para los que están empezando con HTML, CSS,etc.... Siempre recomiendo visitar w3schools en tu caso el link es directo al apartado de Tablas, dentro de HTML.
    – rencinas
    Commented el 26 feb. 2018 a las 15:10

2 respuestas 2

1

Puedes darle estilos con un archivo CSS o directamente en tu código HTML que lo mas practico es por CSS crea un archivo de texto con nombre por ejemplo estiloTabla con la extención .css (estiloTabla.css)

Y agrega el siguiente texto dentro del archivo:

body {font-family: Arial, Helvetica, sans-serif;}

table {     font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 12px;    margin: 45px;     width: 480px; text-align: left;    border-collapse: collapse; }

th {     font-size: 13px;     font-weight: normal;     padding: 8px;     background: #b9c9fe;
    border-top: 4px solid #aabcfe;    border-bottom: 1px solid #fff; color: #039; }

td {    padding: 8px;     background: #e8edff;     border-bottom: 1px solid #fff;
    color: #669;    border-top: 1px solid transparent; }

tr:hover td { background: #d0dafd; color: #339; }

Ya tu puedes modificar tipo de letra tamaño colores a tu gusto.

En tu archivo html necesitas hacer referencia ha este archivo dentro de las etiquetas head <head> aqui </head> agrega la siguiente linea.

<head>
<link rel="stylesheet" type="text/css" href="estiloTabla.css">
</head>

Tutorial CSS

1
  • Gracias @SoftMolina ya podre darle la forma y color que guste.
    – gemita
    Commented el 26 feb. 2018 a las 15:46
1

te sugiero que descargues bootstrap para diseños de tus formularios y tablas desde aqui: https://getbootstrap.com/docs/4.0/getting-started/download/

mientras tanto, te dejo la estructura de tu tabla ya diseñada pero trabajado con bootstrap, suerte:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
</head>
<body>
    <form id="form1" runat="server">
        <div class="container">
            <h4>Consumo de combustible de los autos a lo largo de las pruebas de manejo</h4><hr />
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th scope="col">Car</th>
                        <th>Enero</th>
                        <th>Febrero</th>
                        <th>Marzo</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">Chevrolet Camaro</th>
                        <td>1254 lts</td>
                        <td>1582 lts</td>
                        <td>685 lts</td>
                    </tr>
                    <tr>
                        <th scope="row">Lamborghini Aventator</th>
                        <td>1854 lts</td>
                        <td>1978 lts</td>
                        <td>1502 lts</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </form>
</body>
</html>

1
  • 1
    Hola @Juan. Bienvenido a Stack Overflow en español y gracias por tu aporte! Bootstrap puede ayudar a crear una web responsiva, evitándose varias líneas de CSS, pero ¿no crees que para el alcance de esta pregunta conviene ir a lo básico, explicando cómo se aplican las reglas? Veo la imagen de la pregunta y el resultado de tu respuesta y no me parecen que se logre lo mismo.
    – Mariano
    Commented el 30 mar. 2018 a las 7:40

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.