Autor Tema: CSS crear tabla con efecto esquina redondeada border-radius ejemplo CU01058D  (Leído 2552 veces)

JurreNawijn

  • Sin experiencia
  • *
  • Mensajes: 32
    • Ver Perfil
Dejo la respuesta al ejercicio del curso básico de programación web con CSS usando Notepad++ como editor

Código: [Seleccionar]
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8" />

<style type="text/css">
* {margin:0;}
    table {
        background-color: #EBEBEB;
        text-align: center;
        margin: 45px 1px 45px 1px;
        font-size: 1.3em;
        float:left;
        border-radius: 3%;
        font-family:cursive;
    }
    #tabla3 {
        background-color: #E1F3C3;
    }
    .incluye {
        color: #7EE57E;
        font-weight:900;
        text-shadow: 1px 1px green, -1px -1px green;
    }
    .noincluye {
        color: #FF6F71;
        font-weight: 900;
        text-shadow: 1px 1px red, -1px -1px red;
    }

   
    th, td {
        padding: 15px 50px 15px 50px;
        margin:20px;
        border-bottom: 1px solid #CDCDCD;
    }
    tfoot th {
        border-bottom-style: hidden;
    }
</style>
</head>

<body>
<table id="tabla1">
<thead>
<tr>
<th>Standard</th>
</tr>
</thead>
<tbody>
<tr class="incluye">
<td>&#10003;</td>
</tr>
<tr class="incluye">
<td>&#10003;</td>
</tr>
<tr class="noincluye">
<td>&#10008;</td>
</tr>
        <tr class="noincluye">
<td>&#10008;</td>
</tr>
    <tbody>
        <tfoot>
            <th>$99</th>
        </tfoot>
</table>
   
<table id="tabla2">
<thead>
<tr>
<th>Professional</th>
</tr>
</thead>
<tbody>
<tr class="incluye">
<td>&#10003;</td>
</tr>
<tr class="incluye">
<td>&#10003;</td>
</tr>
<tr class="incluye">
<td>&#10003;</td>
</tr>
        <tr class="noincluye">
<td>&#10008;</td>
</tr>
    </tbody>
    <tfoot>
            <th>$199</th>
        </tfoot>

</table>

<table id="tabla3">
<thead>
<tr>
<th>Enterprise</th>
</tr>
</thead>
<tbody>
<tr class="incluye">
<td>&#10003;</td>
</tr>
<tr class="incluye">
<td>&#10003;</td>
</tr>
<tr class="incluye">
<td>&#10003;</td>
</tr>
        <tr class="incluye">
<td>&#10003;</td>
</tr>
    </tbody>
    <tfoot>
            <th>$399</th>
        </tfoot>

</table>
</body>
</html>

Intenté hacerlo lo más parecido que pude, pero no pude conseguir el tipo de fuente.
« Última modificación: 27 de Junio 2017, 19:23 por Ogramar »
¿Por qué programo? Me gusta programar porqué me hace sentir que tengo el control de la situación. Así me siento cuando programo. JurreNawijn

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2660
    • Ver Perfil
Yo lo veo genial, además para los símbolos podías haber usado imágenes pero al usar los códigos HTML como &#10003 tienes la ventaja de que la carga es más rápida  :D

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".