Autor Tema: CSS y HTML cómo poner esquinas redondeadas a una tabla border-radius CU01058D (Leído 3447 veces)

paramonso · « **en:** 17 de Junio 2017, 18:22 »

Hola a Todos. Aquí dejo el Ejercicio nº CU01058D del curso práctico de desarrollo web con CSS desde cero.

Código HTML

Código: [Seleccionar]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="ejercicio58.css">
<link rel="stylesheet"  href="https://fonts.googleapis.com/css?family=Tangerine">
<link href="https://fonts.googleapis.com/css?family=Akronim" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Almendra+Display" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=UnifrakturCook:700" rel="stylesheet">
</head>

<body>
<div id="Div1">
<h1 id="cab"> Curso CSS estilos aprenderaprogramar.com</h1>
<h1 id="cab">Practicas de propiedades para Tablas </h1>
<h1 id="subcab">Propiedades de bordes redondeados</h1>
<h1 id="cab">Ejercicio Entrega 58 	cu01058d</h1>
<h2 id="nom">Pablo Ramon Perez Blasco</h2>
</div>
<h1 align="center">Ejercicio Entrega 58 	cu01058d</h1>
 <div class="Cont1" >
	  
<table class="tab-des">
	
<!--<caption>: elemento opcional que permite poner un título de tabla. Muchas veces no se usa.-->
<thead>
 <!-- <tr> Filas  (table row).-->

<tr>
	<!-- <th> Columnas de cabecera  -->
	<th class="colum1">Standard</th> 			
	<th class="colum2">Professional</th> 
	<th class="colum3">Enterprise</th>
</tr> 
</thead>

<tbody>
<tr> 
	<!-- <td> Columnas normales de datos (table data cell). -->
	<td class="colum1" ><img src="http://imgur.com/0VfOuO8.png"></td> 
	<td class="colum2"><img src="http://imgur.com/0VfOuO8.png"></td> 
	<td class="colum3"><img src="http://imgur.com/0VfOuO8.png"></td>
	 
</tr>
 
 <tr> 
	<!-- <td> Columnas normales de datos (table data cell). -->
	<td class="colum1"><img src="http://imgur.com/0VfOuO8.png"></td> 
	<td class="colum2"><img src="http://imgur.com/0VfOuO8.png"></td> 
	<td class="colum3"><img src="http://imgur.com/0VfOuO8.png"></td>
	 
</tr>

<tr> 
	<!-- <td> Columnas normales de datos (table data cell). -->
	<td class="colum1"><img src="http://imgur.com/lZX3UpQ.png"></td> 
	<td class="colum2"><img src="http://imgur.com/0VfOuO8.png"></td> 
	<td class="colum3"><img src="http://imgur.com/0VfOuO8.png"></td>
	 
</tr>

<tr> 
	<!-- <td> Columnas normales de datos (table data cell). -->
	<td class="colum1"><img src="http://imgur.com/lZX3UpQ.png"> </td> 
	<td class="colum2"><img src="http://imgur.com/lZX3UpQ.png"> </td> 
	<td class="colum3"><img src="http://imgur.com/0VfOuO8.png"> </td>
	
</tr>
</tbody>
<tfoot>
<tr> 
	<!-- <td> Columnas normales de datos (table data cell). -->
	<td class="colum1">$99</td> 
	<td class="colum2">$199</td> 
	<td class="colum3">$399</td>
	 
</tr>
</tfoot>
</table>
</div>

   
</body>
</html>

Código CSS

Código: [Seleccionar]

body {font-family: verdana, sans-serif; margin:0;background-color:DarkSlateBlue; }
/* <<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/* <<<<<<<<<<<<<<<<<<<<<<<<Presentacion cabecera>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/* <<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
	 #Div1{ height:400px; width:75%x; }
	 #Menu{ height:450px; width:100%;}
	 #Div1, #Menu{ 	background-color:indigo; border-style:none; color:red; border-width:0px;}
	 #cab{color:#228B22; text-align:center; font-family: "Tangerine", serif; font-size:88px; 
		text-shadow: 4px 4px 4px #aaa; margin:0; padding:0; }
	 #subcab{ color:#008000; text-align:center; font-family: "Akronim", cursive; font-size: 58px;
		text-shadow: 4px 4px 4px #aaa; margin:0; padding:0; }
	 #nom{ color:#00FF7F; text-align:center; font-family: "Almendra Display", cursive; font-size:18px;
		text-shadow: 4px 4px 4px #fff; margin:0; padding:0; }
	 #Menu{ font-family: "UnifrakturCook", cursive; font-size:20px;}
	 #menunom{color:#00FF7F;	font-size:55px;	text-align:center; text-shadow: 4px 4px 4px #fff;
			  margin:50;padding:50;}
	 h1, h2 {text-align:center;}

/* <<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/* <<<<<<<<<<<<<<<<<<<<<<<<EJERCICIO Nº 58 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/* <<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/


								/*<<<<<<<<<<<<<<<<CONTENEDOR PRINCIPAL >>>>>>>>>>>>>>>>>*/
.Cont1{	
		margin:4% auto;    				/*Centrar el contenedor en el centro de la pagina*/
		border: 2px solid white;		/*Grosor del contenedor */
		height: 450px; 					/*Altura del contenedor */
		width: 900px; 					/*Anchura del contenedor*/
		background-color:white;			/*Color fondo contenedor*/
		color:black;					/*Color texto contenedor*/
		font-size: 20px; 				/*Tamaño de la fuente*/
		text-align:center; 				/*Alineacion del texto */
		padding-top: 10px; 				/*Separación del borde de la cabecera*/
		word-wrap:break-word;			/*Cuando la letra llega al final de la caja se cortara en formato word*/
		}
		
		/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
		/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<DISEÑO DE LA TABLA  >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>><*/
		/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/ 
		
		.tab-des {  color: #333; 	/*se muestras los textos en la tabla con el color #3333 */
		 font-family: calibri;      /*tipo de fuente para la tabla*/
		 width: 840px; 			    /*ancho de la tabla*/
		 margin:0.5% auto;          /*Alineacion tabla*/
		 	
		  }
		   
		td, th { 											
		border: 1px solid transparent; 	  	    	/* borde de 1 pixel solido color tranparente*/
		height: 65px; 								/*altura de las celdas de cabecera y de datos 30px*/
		border-collapse:collapse;					/*Sin Bordes*/
		color:black;								/*color texto*/
		text-shadow: 2px 2px #ffffff;				/*sombra texto*/
		}
		
		th { 
	font-size:30px;
	font-weight: bold; 								/*Fuente cabeceras negrita */
	}
td {
	background: #FAFAFA; 							/*color celdas de datos #FAFAFA */
	text-align: center; 							/* alineado de texto en celdas de datos */
	}
			
   
.colum1, .colum2{
				background-color:#E6E6FA;/*Color del fondo de la caja*/
				 }
		 
.colum3 {
			background-color:#DAF7A6  ;/*Color del fondo de la caja*/
		}
thead th{
		border-top-left-radius:10px; /*esquinas redondeadas*/
		border-top-right-radius:10px;
		
		 }
tfoot td{
		font-family: Calibri; /*tipo de fuente para la tabla*/
		font-weight: bold; /*fuente para el tfoot */
		font-size:30px;		/*tamaño fuente pa tfoot */	
		border-bottom-left-radius:10px;/*esquinas redondeadas*/
		border-bottom-right-radius:10px;
		}

pedro,, · « **Respuesta #1 en:** 24 de Junio 2017, 13:48 »

Buenas paramonso.

El ejercicio hace lo que pide el enunciado, pero se podrían cambiar algunas cosas.

Para ahorrar código, podrías haber insertado las imágenes desde el código css.
En .tab-des estableces un color de letra y posteriormente en td, th {...} estableces otro con lo que el que estableciste en la clase tab-des pierde su efecto, y en tfoot td{...} vuelves a establecer el mismo tipo de letra que ya habías establecido en .tab-des

También pedirte que resuelvas los ejercicios con lo que pide el enunciado exclusivamente, para no hacer el código a corregir tan largo.

Te dejo un ejemplo:

Código: [Seleccionar]

<html>
  <head>
    <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
    <style>
  
      /* <<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
      /* <<<<<<<<<<<<<<<<<<<<<<<<EJERCICIO Nº 58 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
      /* <<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/


      /*<<<<<<<<<<<<<<<<CONTENEDOR PRINCIPAL >>>>>>>>>>>>>>>>>*/
      .Cont1{	
        margin:4% auto;    				/*Centrar el contenedor en el centro de la pagina*/
        border: 2px solid white;		/*Grosor del contenedor */
        height: 450px; 					/*Altura del contenedor */
        width: 900px; 					/*Anchura del contenedor*/
        background-color: white;			/*Color fondo contenedor*/
        padding-top: 10px; 				/*Separación del borde de la cabecera*/
      }

      /*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
      /*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<DISEÑO DE LA TABLA  >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>><*/
      /*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/ 

      .tab-des { 
        font-family: Calibri;  
        width: 840px; 			    /*ancho de latabla*/
        margin: 0.5% auto;          /*Alineacion tabla*/
        color: black;	
        font-size:30px;
        text-align: center; 	
      }

      td, th { 											
        border: 1px solid transparent; 	  	
        height: 65px; 								
        border-collapse:collapse;		       			
        text-shadow: 5px 5px #ffffff;	
        background-position: 50%;
        background-repeat: no-repeat;
      }


      .colum1, .colum2{
        background-color:#E6E6FA;/*Color del fondo de la caja*/
      }

      .colum3 {
        background-color:#DAF7A6  ;/*Color del fondo de la caja*/
      }
      thead th{
        border-top-left-radius:10px; /*esquinas redondeadas*/
        border-top-right-radius:10px;

      }
      tfoot td{
        font-weight: bold; /*fuente para el tfoot */
        border-bottom-left-radius:10px;/*esquinas redondeadas*/
        border-bottom-right-radius:10px;
      }
      .verde {        
        background-image: url("http://imgur.com/0VfOuO8.png");
      }
      .rojo {
        background-image:  url("http://imgur.com/lZX3UpQ.png");
      }
    </style>
  </head>

  <body>
 
    <div class="Cont1" >

      <table class="tab-des">

        <!--<caption>: elemento opcional que permite poner un título de tabla. Muchas veces no se usa.-->
        <thead>
          <!-- <tr> Filas  (table row).-->

          <tr>
            <!-- <th> Columnas de cabecera  -->
            <th class="colum1">Standard</th> 			
            <th class="colum2">Professional</th> 
            <th class="colum3">Enterprise</th>
          </tr> 
        </thead>

        <tbody>
          <tr> 
            <!-- <td> Columnas normales de datos (table data cell). -->
            <td class="colum1 verde"></td> 
            <td class="colum2 verde"></td> 
            <td class="colum3 verde"></td>

          </tr>

          <tr> 
            <!-- <td> Columnas normales de datos (table data cell). -->
            <td class="colum1 verde"></td> 
            <td class="colum2 verde"></td> 
            <td class="colum3 verde"></td>

          </tr>

          <tr> 
            <!-- <td> Columnas normales de datos (table data cell). -->
            <td class="colum1 rojo"></td> 
            <td class="colum2 verde"></td> 
            <td class="colum3 verde"></td>

          </tr>

          <tr> 
            <!-- <td> Columnas normales de datos (table data cell). -->
            <td class="colum1 rojo"></td> 
            <td class="colum2 rojo"></td> 
            <td class="colum3 verde"></td>

          </tr>
        </tbody>
        <tfoot>
          <tr> 
            <!-- <td> Columnas normales de datos (table data cell). -->
            <td class="colum1">$99</td> 
            <td class="colum2">$199</td> 
            <td class="colum3">$399</td>

          </tr>
        </tfoot>
      </table>
    </div>


  </body>
</html>

Saludos.

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: