CODEWITHSUNDEEP
htmlcsshtml-table
SkryBlackfall
SkryBlackfall

Reputation: 33

How to nest a table within a table?

I've seen a similar topic, but not for my specific situation. I need to nest a table within the table and it will take up several cells, but when I try to nest a table it deletes the surrounding table at the same time. I included a picture of how it should look after my code and my code is how it looks currently. Can someone explain how this is done? Much appreciated.

/* 
   CSS for Lounge Project 
   Filename: styles.css
   
   Author:   Justus Self
   Date:     3/21/17
   HTML5 and CSS3 Illustrated Unit I, Lounge Independent Project
*/

/*Reset Styles*/
html, body{
   font-size: 14px;
   width: 100%;
   }
a, body, footer, header, h1, h2, h3, img, li, nav, p, ul, table, tbody, td, tfoot, th, thead, tr{
   border: 0;
   padding: 0;
   margin: 0;
}
img {
   max-width: 100%;
   height: auto;
   width: auto;
}

/*Drink font colors*/

h2.green {
  color: green;
}
h2.blue {
  color: blue;
}
h2.purple {
  color: purple;
}
h2.red {
  color: red;
}
h2.yellow {
  color: gold;
}


/*center and border image*/

img.smlounge {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: 3px solid;
  border-color: red;
}


/*Table styles*/

td, th {
  border: 1px solid black;
  font-size: 1.3em;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding: 0 1em ;
}
table {
  border-collapse: collapse;
  margin: 0 auto;
}
td[colspan="2"] {
  width: 20%;
}
.drink-name {
  text-align: left;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Head First Lounge Elixirs</title>

  <!-- 
   Elixir page for Lounge Project 
   Filename: elixir.html
   
   Author:   Justus Self
   Date:     3/21/17
   HTML5 and CSS3 Illustrated Unit I, Lounge Independent Project
   -->

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

<body>
  <h1>Our Elixirs</h1>

  <h2 class="green">Green Tea Cooler</h2>
  <p>
    <img src="../images/green.jpg" alt="Green Tea Cooler" /> Chock full of vitamins and minerals, this elixir combines the healthful benefits of green tea with a twist of chamomile blossoms and ginger root.
  </p>
  <hr/>
  <h2 class="blue">Raspberry Ice Concentration</h2>
  <p>
    <img src="../images/lightblue.jpg" alt="Rasberry Ice Concentration" /> Combining raspberry juice with lemon grass, citrus peel and rosehips, this icy drink will make your mind feel clear and crisp.
  </p>
  <hr/>
  <h2 class="purple">Blueberry Bliss Elixir</h2>
  <p>
    <img src="../images/blue.jpg" alt="Blueberry Bliss Elixir" /> Blueberries and cherry essence mixed into a base of elderflower herb tea will put you in a relaxed state of bliss in no time.
  </p>
  <hr/>
  <h2 class="red">Cranberry Antioxidant Blast</h2>
  <p>
    <img src="../images/red.jpg" alt="Cranberry Antioxidant Blast" /> Wake up to the flavors of cranberry and hibiscus in this vitamin C rich elixir.
  </p>
  <hr/>
  <h2 class="yellow"><a name="Yellow">Lemon Breeze</a></h2>
  <p><img src="../images/yellow.gif" alt="Lemon Breeze Drink" /> The ultimate healthy drink, this elixir combines herbal botanicals, minerals, and vitamins with a twist of lemon into a smooth citrus wonder that will keep your immune system going all day
    and all night.
  </p>
  <hr/>
  <br/>
  <table>
    <thead>
      <tr>
        <th colspan="6">Our Drink Prices</th>
      </tr>
      <tr>
        <th colspan="2">Drink</th>
        <th colspan="2">Size</th>
        <th colspan="2">Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="2" colspan="2" class="drink-name">Green Tea Cooler</td>
        <td colspan="2">16 oz.</td>
        <td colspan="2">$3.75</td>
      </tr>
      <tr>
        <td colspan="2">24 oz.</td>
        <td colspan="2">$4.75</td>
      </tr>
      <tr>
        <td rowspan="2" colspan="2" class="drink-name">Raspberry Ice Concentration</td>
        <td colspan="2">16 oz.</td>
        <td colspan="2">$3.75</td>
      </tr>
      <tr>
        <td colspan="2">24 oz.</td>
        <td colspan="2">$4.75</td>
      </tr>
      <tr>
        <td colspan="2" class="drink-name">Cranberry Antioxidant Blast</td>
        <td colspan="2">20 oz.</td>
        <td colspan="2">$4.75</td>
      </tr>
      <tr>
        <td rowspan="2" colspan="2" class="drink-name">Lemon Breeze</td>
        <td>Iced</td>
        <td>16 oz.</td>
        <td>$3.75</td>
      </tr>
      <tr>
        <td>Frozen</td>
        <td>20 oz.</td>
        <td>$4.75</td>
      </tr>
    </tbody>
  </table>
  <p><a href="../lounge.html">Back to the Lounge</a></p>

  <footer>
    &#169;2016, Head First Online Lounge<br /> All trademarks and registered trademarks appearing on this site are the property of their respective owners.
  </footer>
</body>

</html>

How the table should look

Upvotes: 2

Views: 2289

Answers (3)

Stan Alachniewicz
Stan Alachniewicz

Reputation: 402

Do it like this (of course you'll need to fix the font size and styling, and do the other side too. Ok try this. you still need to fix the font sizing

<table>
<thead>
  <tr>
    <th colspan="6">Our Drink Prices</th>
  </tr>
  <tr>
    <th colspan="2">Drink</th>
    <th colspan="2">Size</th>
    <th colspan="2">Price</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td rowspan="2" colspan="2" class="drink-name">Green Tea Cooler</td>
    <td colspan="2">16 oz.</td>
    <td colspan="2">$3.75</td>
  </tr>
  <tr>
    <td colspan="2">24 oz.</td>
    <td colspan="2">$4.75</td>
  </tr>
  <tr>
    <td rowspan="2" colspan="2" class="drink-name">Raspberry Ice Concentration</td>
    <td colspan="2">16 oz.</td>
    <td colspan="2">$3.75</td>
  </tr>
  <tr>
    <td colspan="2">24 oz.</td>
    <td colspan="2">$4.75</td>
  </tr>
  <tr>
    <td colspan="2" class="drink-name">Cranberry Antioxidant Blast</td>
    <td colspan="2">20 oz.</td>
    <td colspan="2">$4.75</td>
  </tr>
  <tr>
    <td rowspan="2" colspan="2" class="drink-name">Lemon Breeze</td>
    <td colspan="2" rowspan="2" class="nested">

    <table>
    <tbody>
    <tr><td>Iced</td><td>16 oz</td></tr>
    <tr><td>Frozen</td><td>20 oz</td></tr>
    </tbody>
    </table>


    </td>

    <td>$3.75</td>
  </tr>
  <tr>


    <td>$4.75</td>
  </tr>
</tbody>


/* 
   CSS for Lounge Project 
   Filename: styles.css

   Author:   Justus Self
   Date:     3/21/17
   HTML5 and CSS3 Illustrated Unit I, Lounge Independent Project
*/

/*Reset Styles*/
html, body{
   font-size: 14px;
   width: 100%;
   }
a, body, footer, header, h1, h2, h3, img, li, nav, p, ul, table, tbody, td, tfoot, th, thead, tr{
   border: 0;
   padding: 0;
   margin: 0;
}
img {
   max-width: 100%;
   height: auto;
   width: auto;
}

/*Drink font colors*/

h2.green {
  color: green;
}
h2.blue {
  color: blue;
}
h2.purple {
  color: purple;
}
h2.red {
  color: red;
}
h2.yellow {
  color: gold;
}


/*center and border image*/

img.smlounge {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: 3px solid;
  border-color: red;
}


/*Table styles*/

td, th, td td {
  border: 1px solid black;
  font-size: 1.3em;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding: 0 1em ;
}
table {
  border-collapse: collapse;
  margin: 0 auto;
  width:100%
}
table table{
  margin:1%;
  width:98%;

}
table table td{
  width:50%;
}
table table tr, table table tbody{
  width:100%
}
.nested{padding:0;}
td[colspan="2"] {
  width: 20%;
}
.drink-name {
  text-align: left;
}

Upvotes: 0

repzero
repzero

Reputation: 8402

Nested like this

/* 
   CSS for Lounge Project 
   Filename: styles.css
   
   Author:   Justus Self
   Date:     3/21/17
   HTML5 and CSS3 Illustrated Unit I, Lounge Independent Project
*/


/*Reset Styles*/

html,
body {
  font-size: 14px;
  width: 100%;
}

a,
body,
footer,
header,
h1,
h2,
h3,
img,
li,
nav,
p,
ul,
table,
tbody,
td,
tfoot,
th,
thead,
tr {
  border: 0;
  padding: 0;
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
  width: auto;
}


/*Drink font colors*/

h2.green {
  color: green;
}

h2.blue {
  color: blue;
}

h2.purple {
  color: purple;
}

h2.red {
  color: red;
}

h2.yellow {
  color: gold;
}


/*center and border image*/

img.smlounge {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: 3px solid;
  border-color: red;
}


/*Table styles*/

td,
th {
  border: 1px solid black;
  font-size: 1.3em;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding: 0 1em;
}

table {
  border-collapse: collapse;
  margin: 0 auto;
}

td[colspan="2"] {
  width: 20%;
}

.drink-name {
  text-align: left;
}

.mintable {
  border-collapse: initial;
  font-size: 0.9em;
}

tbody {
  border: solid black 1px
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Head First Lounge Elixirs</title>

  <!-- 
   Elixir page for Lounge Project 
   Filename: elixir.html
   
   Author:   Justus Self
   Date:     3/21/17
   HTML5 and CSS3 Illustrated Unit I, Lounge Independent Project
   -->

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

<body>
  <h1>Our Elixirs</h1>

  <h2 class="green">Green Tea Cooler</h2>
  <p>
    <img src="../images/green.jpg" alt="Green Tea Cooler" /> Chock full of vitamins and minerals, this elixir combines the healthful benefits of green tea with a twist of chamomile blossoms and ginger root.
  </p>
  <hr/>
  <h2 class="blue">Raspberry Ice Concentration</h2>
  <p>
    <img src="../images/lightblue.jpg" alt="Rasberry Ice Concentration" /> Combining raspberry juice with lemon grass, citrus peel and rosehips, this icy drink will make your mind feel clear and crisp.
  </p>
  <hr/>
  <h2 class="purple">Blueberry Bliss Elixir</h2>
  <p>
    <img src="../images/blue.jpg" alt="Blueberry Bliss Elixir" /> Blueberries and cherry essence mixed into a base of elderflower herb tea will put you in a relaxed state of bliss in no time.
  </p>
  <hr/>
  <h2 class="red">Cranberry Antioxidant Blast</h2>
  <p>
    <img src="../images/red.jpg" alt="Cranberry Antioxidant Blast" /> Wake up to the flavors of cranberry and hibiscus in this vitamin C rich elixir.
  </p>
  <hr/>
  <h2 class="yellow"><a name="Yellow">Lemon Breeze</a></h2>
  <p><img src="../images/yellow.gif" alt="Lemon Breeze Drink" /> The ultimate healthy drink, this elixir combines herbal botanicals, minerals, and vitamins with a twist of lemon into a smooth citrus wonder that will keep your immune system going all day
    and all night.
  </p>
  <hr/>
  <br/>
  <table>
    <thead>
      <tr>
        <th colspan="6">Our Drink Prices</th>
      </tr>
      <tr>
        <th colspan="2">Drink</th>
        <th colspan="2">Size</th>
        <th colspan="2">Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="2" colspan="2" class="drink-name">Green Tea Cooler</td>
        <td colspan="2">16 oz.</td>
        <td colspan="2">$3.75</td>
      </tr>
      <tr>
        <td colspan="2">24 oz.</td>
        <td colspan="2">$4.75</td>
      </tr>
      <tr>
        <td rowspan="2" colspan="2" class="drink-name">Raspberry Ice Concentration</td>
        <td colspan="2">16 oz.</td>
        <td colspan="2">$3.75</td>
      </tr>
      <tr>
        <td colspan="2">24 oz.</td>
        <td colspan="2">$4.75</td>
      </tr>
      <tr>
        <td colspan="2" class="drink-name">Cranberry Antioxidant Blast</td>
        <td colspan="2">20 oz.</td>
        <td colspan="2">$4.75</td>
      </tr>
      <tr>
        <td rowspan="2" colspan="2" class="drink-name">Lemon Breeze</td>
        <td rowspan="2" colspan="2">
          <table class="mintable">
            <tr>
              <td>Iced</td>
              <td>16 oz.</td>
            </tr>
            <tr>
              <td>Frozen</td>
              <td>20 oz.</td>

            </tr>

          </table>

        </td>
        <td>
          <table class="mintable">
            <tr rowspan="2" colspan="2">
              <td>$4.75</td>
            </tr>
            <tr>
              <td>$3.75</td>
            </tr>
          </table>

        </td>
      </tr>
      <td></td>
    </tbody>
  </table>

  <br>
  <p><a href="../lounge.html">Back to the Lounge</a></p>

  <footer>
    &#169;2016, Head First Online Lounge<br /> All trademarks and registered trademarks appearing on this site are the property of their respective owners.
  </footer>
</body>

</html>

Upvotes: 1

Anoop H.N
Anoop H.N

Reputation: 1264

You can do something like below and change the CSS as per your need.

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

<head>
  <meta charset="utf-8" />
  <title>Head First Lounge Elixirs</title>

  <!-- 
   Elixir page for Lounge Project 
   Filename: elixir.html
   
   Author:   Justus Self
   Date:     3/21/17
   HTML5 and CSS3 Illustrated Unit I, Lounge Independent Project
   -->

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

<body>
  <h1>Our Elixirs</h1>

  <h2 class="green">Green Tea Cooler</h2>
  <p>
    <img src="../images/green.jpg" alt="Green Tea Cooler" /> Chock full of vitamins and minerals, this elixir combines the healthful benefits of green tea with a twist of chamomile blossoms and ginger root.
  </p>
  <hr/>
  <h2 class="blue">Raspberry Ice Concentration</h2>
  <p>
    <img src="../images/lightblue.jpg" alt="Rasberry Ice Concentration" /> Combining raspberry juice with lemon grass, citrus peel and rosehips, this icy drink will make your mind feel clear and crisp.
  </p>
  <hr/>
  <h2 class="purple">Blueberry Bliss Elixir</h2>
  <p>
    <img src="../images/blue.jpg" alt="Blueberry Bliss Elixir" /> Blueberries and cherry essence mixed into a base of elderflower herb tea will put you in a relaxed state of bliss in no time.
  </p>
  <hr/>
  <h2 class="red">Cranberry Antioxidant Blast</h2>
  <p>
    <img src="../images/red.jpg" alt="Cranberry Antioxidant Blast" /> Wake up to the flavors of cranberry and hibiscus in this vitamin C rich elixir.
  </p>
  <hr/>
  <h2 class="yellow"><a name="Yellow">Lemon Breeze</a></h2>
  <p><img src="../images/yellow.gif" alt="Lemon Breeze Drink" /> The ultimate healthy drink, this elixir combines herbal botanicals, minerals, and vitamins with a twist of lemon into a smooth citrus wonder that will keep your immune system going all day
    and all night.
  </p>
  <hr/>
  <br/>
  <table>
    <thead>
      <tr>
        <th colspan="6">Our Drink Prices</th>
      </tr>
      <tr>
        <th colspan="2">Drink</th>
        <th colspan="2">Size</th>
        <th colspan="2">Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="2" colspan="2" class="drink-name">Green Tea Cooler</td>
        <td colspan="2">16 oz.</td>
        <td colspan="2">$3.75</td>
      </tr>
      <tr>
        <td colspan="2">24 oz.</td>
        <td colspan="2">$4.75</td>
      </tr>
      <tr>
        <td rowspan="2" colspan="2" class="drink-name">Raspberry Ice Concentration</td>
        <td colspan="2">16 oz.</td>
        <td colspan="2">$3.75</td>
      </tr>
      <tr>
        <td colspan="2">24 oz.</td>
        <td colspan="2">$4.75</td>
      </tr>
      <tr>
        <td colspan="2" class="drink-name">Cranberry Antioxidant Blast</td>
        <td colspan="2">20 oz.</td>
        <td colspan="2">$4.75</td>
      </tr>
      <tr>
        <td rowspan="2" colspan="2" class="drink-name">Lemon Breeze</td>
        <td colspan="2">
          <table>
            <tr>

              <td>Iced</td>
              <td>16 oz.</td>
            </tr>
            <tr>
              <td>Frozen</td>
              <td>20 oz.</td>
            </tr>
          </table>
        </td>
        <td colspan="2">
          <table>
            <tr>
              <td>$3.75</td>
            </tr>
            <tr>
              <td>$4.75</td>
            </tr>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
  <p><a href="../lounge.html">Back to the Lounge</a></p>

  <footer>
    &#169;2016, Head First Online Lounge<br /> All trademarks and registered trademarks appearing on this site are the property of their respective owners.
  </footer>
</body>

</html>

Hope this helps!

Upvotes: 1

Related Questions