PAW_TP1_Maquetado_Punto_7

index.html

<table>
  <tbody>
    <tr>
      <td class="fecha-de-entrega" rowspan="2">Fecha Entrega</td>
      <td class="tp-border-solid">TP1</td>
      <td class="tp-border-top-bottom-right">TP2</td>
      <td class="tp-border-top-bottom-right">TP3</td>
      <td class="tp-border-top-bottom-right">TP4</td>
      <td class="tp-border-top-bottom-right">TP5</td>
      <td class="tp-border-top-bottom-right">TP6</td>
      <td class="tp-border-top-bottom">TP</td>
    </tr>
    <tr>
      <td class="head head-border-left-bottom">Maquetado</td>
      <td class="head head-border-bottom">Intro a backend</td>
      <td class="head head-border-bottom">Programación FrontEnd</td>
      <td class="head head-border-bottom">CSS</td>
      <td class="head head-border-bottom">Programación en BackEnd</td>
      <td class="head head-border-bottom">Canvas</td>
      <td class="head head-last-border">Integrador</td>
    </tr>
    <tr>
      <td class="date-first-border">17/08</td>
      <td rowspan="3" class="html5">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td class="date-border-right">24/08</td>
      <td rowspan="3" class="php-intro">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td class="date-border-right">31/08</td>
      <td rowspan="3" class="js">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td class="date-border-right">07/09</td>
      <td class="php-intro-border-right">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td class="date-border-right">14/09</td>
      <td>&nbsp;</td>
      <td class="js-border-right">&nbsp;</td>
      <td rowspan="4" class="css">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td class="date-border-right">21/09</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td class="css-border-right">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td class="date-border-right">28/09</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td class="css-border-right">&nbsp;</td>
      <td rowspan="4" class="php-backend">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td class="date-border-right">05/10</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td class="css-border-right">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td class="date-border-right">12/10</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td class="php-backend-border-right">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td class="date-border-right">19/10</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td class="php-backend-border-right">&nbsp;</td>
      <td rowspan="2" class="svg">&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td class="date-border-right">26/10</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td class="svg-border-right">&nbsp;</td>
      <td rowspan="6" class="tp-final">&nbsp;</td>
    </tr>
    <tr>
      <td class="date-border-right">02/11</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td class="tp-final-border-right">&nbsp;</td>
    </tr>
    <tr>
      <td class="date-border-right">09/11</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td class="tp-final-border-right">&nbsp;</td>
    </tr>
    <tr>
      <td class="date-border-right">16/11</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td class="tp-final-border-right">&nbsp;</td>
    </tr>
    <tr>
      <td class="date-border-right">23/11</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td class="tp-final-border-right">&nbsp;</td>
    </tr>
    <tr>
      <td class="date-last-border">30/11</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td class="tp-final-border-right">&nbsp;</td>
    </tr>
  </tbody>
</table>

paw_tp1_maquetado_punto_7.markdown

PAW_TP1_Maquetado_Punto_7

A Pen by Nicolás on CodePen.

License.

paw_tp_maquetado_punto_7.markdown

PAW_TP_Maquetado_Punto_7

A Pen by Nicolás on CodePen.

License.

paw_tp_maquetado_punto_8.markdown

PAW_TP_Maquetado_Punto_8

A Pen by Nicolás on CodePen.

License.

style.css

table, tbody, tr, td {
  text-align: center;
  font-family: system-ui;
  border-spacing: 0;
  font-size: 18px;
}

table {
  border-style: none solid solid none;
  border-color: black;
}

tr:nth-child(1) {
  height: 25px;
}

tr:nth-child(2) {
  height: 100px;
  font-weight: bold;
}

td:nth-child(1n+2) {
  width: 110px;
}

tr:nth-child(2n+4) {
  background: #E8F0FE;
}

tr:nth-last-child(1) {
  background: #ACC9FF;
}

/**** TP estilos ****/
/********************/

.tp-border-solid {
  border-style: solid solid solid solid;
}

.tp-border-top-bottom-right {
  border-style: solid solid solid none;
}

.tp-border-top-bottom {
  border-style: solid none solid none;
}

/**** Encabezado estilos ****/
/****************************/

.head {
  padding-left: 5px;
  padding-right: 5px;
}

.head-border-left-bottom {
  border-style: none groove solid solid;
}

.head-border-bottom {
  border-style: none groove solid none;
}

.head-last-border {
  border-style: none none solid none;
}

/**** Fecha estilos ****/
/***********************/

.date-first-border {
  border-style: solid solid groove groove;
}

.date-border-right {
  border-style: none solid groove groove;
}

.date-last-border {
  border-style: none solid none groove;
}

/**** Fecha de entrega estilos ****/
/**********************************/

.fecha-de-entrega {
  background-color: #0B5394;
  color: white;
  align-text: center;
  padding-left: 20px;
  padding-right: 20px;
}

/**** HTML5 ****/
/***************/

.html5 {
  background: no-repeat bottom right / 50% url("https://s3.amazonaws.com/nisevi-paw/tp1/html5.png");
  background-color: #E69138;
  border-style: none solid solid none;
}

/**** PHP intro ****/
/*******************/

.php-intro {
  background: no-repeat bottom right / 50% url("https://s3.amazonaws.com/nisevi-paw/tp1/PHP-logo.svg");
  background-color: #1155CC;
  border-style: solid solid solid none;
}

.php-intro-border-right {
  border-style: none solid none none;
}

/**** JS ****/
/************/

.js {
  background: no-repeat right/50% url("https://s3.amazonaws.com/nisevi-paw/tp1/js.svg");
  background-color: #FEFF00;
  border-style: solid solid solid none;
}

.js-border-right {
  border-style: none solid none none;
}

/**** CSS ****/
/*************/

.css {
  background: no-repeat bottom right/45% url("https://s3.amazonaws.com/nisevi-paw/tp1/CSS3.svg");
  background-color: #6C9FEB;
  border-style: solid solid solid none;
}

.css-border-right {
  border-style: none solid none none;
}

/**** PHP BackEnd ****/
/*********************/

.php-backend {
  background: no-repeat bottom right / 50% url("https://s3.amazonaws.com/nisevi-paw/tp1/PHP-logo.svg");
  background-color: #1C4586;
  border-style: solid solid solid none;
}

.php-backend-border-right {
  border-style: none solid none none;
}

/**** SVG ****/
/*************/

.svg {
  background: no-repeat right / 30% url("https://s3.amazonaws.com/nisevi-paw/tp1/SVG_Logo.png");
  background-color: #990001;
  border-style: solid solid solid none;
}

.svg-border-right {
  border-style: none solid none none;
}

/**** TP final ****/
/******************/

.tp-final {
  background-color: #1155CC;
  border-style: solid none none none;
}

.tp-final-border-right {
  border-style: none solid none none;
}