Foros aprenderaprogramar.com

Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: JurreNawijn en 24 de Enero 2016, 16:19

Título: CSS crear tabla con efecto esquina redondeada border-radius ejemplo CU01058D
Publicado por: JurreNawijn en 24 de Enero 2016, 16:19
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.
Título: Re:CSS crear una tabla con efecto esquina redondeada border-radius ejemplo CU01058D
Publicado por: Ogramar en 27 de Enero 2016, 09:46
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