How do I format table headers with a specific design? - html

I'm working on an assignment where we have to create a website that is formatted similarly to a picture of a resume. The picture is here: link
I have most of the formatting correctly, but there are a couple things I can't figure out. First of all, how do I create a table header style similar to the one in the image?
Also, how can I make the name and picture area into a block and add those two borders?
Oh, and how come my icons for my list turned out to be chinese characters, I copied the code for the sideways triangle, but it came out as that. And the codes weren't working for the phone/email either so I ended up using a picture of them instead.
<!DOCTYPE html>
<html>
<head>
<title>Job Resume</title>
</head>
<style>
body {
font-family: Arial;
font-size: 12px;
width: 800px;
}
table {
border: 1px solid black;
border-collapse: collapse;
}
th {
text-align: left;
background-color: lightblue;
border: none;
padding: 3px;
}
td {
border: none;
padding: 10px
}
ul {
list-style: none;
padding: 0px;
}
ul li:before {
content: '\9654';
margin: 0 1em;
}
</style>
<body>
<table style="float:right; width: 300px;">
<tr>
<th colspan="2">Contact</th>
</tr>
<tr>
<td style="padding: 3px"><img src="phone.jpg" alt="HTML5 Icon" style="float: left;">: 747-357-2004</td>
<td style="padding: 3px">54th Street,</br>17th Floor,</td>
</tr>
<tr>
<td style="padding: 3px"><img src="phone.jpg" alt="HTML5 Icon" style="float: left;">: 327-127-8390</td>
<td style="padding: 3px">New York,</br>United States.</td>
</tr>
<tr>
<td style="padding: 3px"><img src="email.jpg" alt="HTML5 Icon" style="float: left;">: rachelgarner#gmail.com</td>
<td style="padding: 3px">NY 10022</td>
</tr>
</table>
</br>
</br>
<p><img src="rachel_garner.jpg" alt="HTML5 Icon" style="float: left;">
<span style="font-size: 25px"><b>RACHEL GARNER</b></span>
</br><span style="color: orange">MARKETING MANAGER</span></br>
</br></br></br><span style="color: blue">www.google.com</span></p>
<table width="100%">
<tr>
<th colspan="2">Profile</th>
</tr>
<tr>
<td><b>Personal Statement:</b></td>
<td>Experienced in administrative duties; scheduled meetings, handled travel arrangements and
purchasing. Computer skills include Microsoft Excel, Access, Word, and PowerPoint.
Excellent problem solving and communication skills. Accustomed to long work hours.
Winner: Employee of the Month 1999 for October and December.</td>
</tr>
<tr>
<td><b>Career Objective:</b></td>
<td>To obtain an executive sales/marketing management position within a growth oriented,
progressive company. I want to apply my business development/sales skills to an
environment where they will make a significant impact on the bottom line. The idea
atmosphere would be entrepreneurial and one in which new ideas are welcome and
decision making is required.</td>
</table>
</br>
<table width="100%">
<tr>
<th>Key Skills</th>
</tr>
<tr>
<td>This is a main summary of my skills.</td>
</tr>
<tr>
<td>
<ul>
<li>Negotiating (Intermediate)</li>
<li>Access (Beginner)</li>
<li>Accounting (Beginner)</li>
<li>Sales Auditing (Expert)</li>
<li>Invoicing (Intermediate)</li>
</ul>
</td>
</tr>
</table>
</br>
<table width="100%">
<tr>
<th>Education</th>
</tr>
<tr>
<td><b>Bachelor's Degree</b> - <i>Marketing</i> <span style="float: right;"><b>2002 - 2006</b></span></td>
</tr>
<tr>
<td><b>The University of Mississippi</b>, MS</td>
</tr>
<tr>
<td>Bachelor of Business Administration May 2001 Major: Marketing, Minor: International Business Overall GPA: 3.0, Major GPA: 3.3</td>
</tr>
</table>
</br>
<table width="100%">
<tr>
<th>Work Experience</th>
</tr>
<tr>
<td><b>University Hallmark Oxford, MS <span style="float:right;"><i>Full Time</i></span></b></td>
</tr>
<tr>
<td><b>Sales Clerk</b><i> (Invoicing, Administration)</i> <span style="float:right;"><b>Oct 2001 to Present</b></span></td>
</tr>
<tr>
<td>Full time roll overseeing the operation of the sales and marketing department.</td>
</tr>
<tr>
<td><ul>
<li>Successfully perform managerial duties during manager's absence</li>
<li>Train new employees and conduct company and product orientations</li>
</ul></td>
</tr>
</table>
</body>
</html>
This is what my website looks like so far:


Line break is defined as <br> not </br>
<span> doesn't need to be inside <p> because you can write your text in <span> directly & it will show up.
You don't need to write <br> between everything, Just type spaces, HTML will ignore them. This is not python!
body {
font-family: Arial;
font-size: 12px;
width: 800px;
}
table {
border: 1px solid black;
border-collapse: collapse;
}
th {
text-align: left;
background-color: lightblue;
border: none;
padding: 3px;
}
td {
border: none;
padding: 10px
}
ul {
list-style: none;
padding: 0px;
}
ul li:before {
content: '\9654';
margin: 0 1em;
}
#headerMenu {
display: inline-block;
/* it will act same as display:table; except if any element sit on it */
height: 125px;
/* same as Contact Table Height*/
padding: 2px;
border-top: 2px solid grey;
border-bottom: 2px solid grey;
}
#contactTable {
margin-right: 180px;
margin-bottom: 1px;
}
<!DOCTYPE html>
<html>
<head>
<title>Job Resume</title>
</head>
<body>
<table id="contactTable" style="float:right; width: 300px;">
<tr>
<th colspan="2">Contact</th>
</tr>
<tr>
<td style="padding: 3px">
<img src="phone.jpg" alt="HTML5 Icon" style="float: left;">: 747-357-2004</td>
<td style="padding: 3px">54th
<br>Street,17th Floor,</td>
</tr>
<tr>
<td style="padding: 3px">
<img src="phone.jpg" alt="HTML5 Icon" style="float: left;">: 327-127-8390</td>
<td style="padding: 3px">New York,United States.</td>
</tr>
<tr>
<td style="padding: 3px">
<img src="email.jpg" alt="HTML5 Icon" style="float: left;">: rachelgarner#gmail.com</td>
<td style="padding: 3px">NY 10022</td>
</tr>
</table>
<div id="headerMenu">
<img src="rachel_garner.jpg" alt="HTML5 Icon" style="float: left;">
<h1 style="font-size: 20px; padding:20px;"><b>RACHEL GARNER</b></h1> <span style="color: orange"><br>MARKETING MANAGER</span> <span style="color: blue">www.google.com</span>
</div>
<table width="100%">
<tr>
<th colspan="2">Profile</th>
</tr>
<tr>
<td><b>Personal Statement:</b>
</td>
<td>Experienced in administrative duties; scheduled meetings, handled travel arrangements and purchasing. Computer skills include Microsoft Excel, Access, Word, and PowerPoint. Excellent problem solving and communication skills. Accustomed to long work
hours. Winner: Employee of the Month 1999 for October and December.</td>
</tr>
<tr>
<td><b>Career Objective:</b>
</td>
<td>To obtain an executive sales/marketing management position within a growth oriented, progressive company. I want to apply my business development/sales skills to an environment where they will make a significant impact on the bottom line. The idea
atmosphere would be entrepreneurial and one in which new ideas are welcome and decision making is required.</td>
</tr>
</table>
<table width="100%">
<tr>
<th>Key Skills</th>
</tr>
<tr>
<td>This is a main summary of my skills.</td>
</tr>
<tr>
<td>
<ul>
<li>Negotiating (Intermediate)</li>
<li>Access (Beginner)</li>
<li>Accounting (Beginner)</li>
<li>Sales Auditing (Expert)</li>
<li>Invoicing (Intermediate)</li>
</ul>
</td>
</tr>
</table>
<table width="100%">
<tr>
<th>Education</th>
</tr>
<tr>
<td><b>Bachelor's Degree</b> - <i>Marketing</i> <span style="float: right;"><b>2002 - 2006</b></span>
</td>
</tr>
<tr>
<td><b>The University of Mississippi</b>, MS</td>
</tr>
<tr>
<td>Bachelor of Business Administration May 2001 Major: Marketing, Minor: International Business Overall GPA: 3.0, Major GPA: 3.3</td>
</tr>
</table>
<table width="100%">
<tr>
<th>Work Experience</th>
</tr>
<tr>
<td><b>University Hallmark Oxford, MS <span style="float:right;"><i>Full Time</i></span></b>
</td>
</tr>
<tr>
<td><b>Sales Clerk</b><i> (Invoicing, Administration)</i> <span style="float:right;"><b>Oct 2001 to Present</b></span>
</td>
</tr>
<tr>
<td>Full time roll overseeing the operation of the sales and marketing department.</td>
</tr>
<tr>
<td>
<ul>
<li>Successfully perform managerial duties during manager's absence</li>
<li>Train new employees and conduct company and product orientations</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
All Errors Fixed.


The Chinese text problem is here:
ul li:before {
content: '\9654';
margin: 0 1em;
}
Just delete :
ul {
list-style: none;
padding: 0px;
}
ul li:before {
content: '\9654';
margin: 0 1em;
}
If you want using Bullet with symbol, you can use it:
For a circle:
ul {
list-style-type: circle;
}
For a Square:
ul {
list-style-type: square;
}
For using image:
ul {
list-style-image: url('your-image.png');
}
You can't always use tables for design a layout on the website.
First, try learn some CSS for layout element, like margin, padding, float, or clear.
I hope this can help you.

Related

HTML - Images and text not following table properly

I have one known-problem: text and images that should be below the table are in the wrong place (see screenshot)
.openingtimes {
text-align: right;
padding-top: auto;
padding-right: auto;
padding-left: auto;
padding-bottom: auto;
}
table,
tr,
td {
border: 1px solid;
text-align: center;
padding-top: auto;
padding-right: auto;
padding-left: auto;
padding-bottom: auto;
}
<div>
<table border="1" align="right">
<tbody>
<tr>
<td>Monday</td>
<td>0900 - 1800</td>
</tr>
<tr>
<td>Tuesday</td>
<td>0900 - 1800</td>
</tr>
<tr>
<td>Wednesday</td>
<td>0900 - 1800</td>
</tr>
<tr>
<td>Thursday</td>
<td>0900 - 1800</td>
</tr>
<tr>
<td>Friday</td>
<td>0900 - 1800</td>
</tr>
<tr>
<td>Saturday</td>
<td>0900 - 1700</td>
</tr>
</tbody>
</table>
</div>
<div class="openingtimes">
<br>
<b>All major card types accepted including contactless </b><br>
<br>
<img src="https://stylebyjulie.co.uk/wp-content/uploads/2021/10/paymentmethods.png" alt="style by julie payment methods" width="227" height="28" align="right">
<br><br>
<b>Supporting (click to find out more)</b><br><br>
<a href="https://stylebyjulie.co.uk/little-princess-trust/">
<img title="little princess trust" src="https://stylebyjulie.co.uk/wp-content/uploads/2021/10/littleprincess-logo.png" alt="little princess trust" width="138" height="111" align="right"></a>
</div>
The content should all be aligning to the right.
The text and images should be below the table in this order
Table
"all major card types accepted" text
card types img
"supporting" text
Little princess trust img
PS: I am new to HTML so if you have any feedback on my code feel free to include. Always looking to learn and improve.

The align="right" attribute on your table was breaking the layout but this has been deprecated and shouldn't be used. I've used margin-inline: auto 0 on your table instead that pushes the table to the right. Here's a good video from Kevin Powell to help you. If you're new to HTML and CSS his videos are a very good introduction.
.openingtimes {
text-align: right;
padding-top: auto;
padding-right: auto;
padding-left: auto;
padding-bottom: auto;
}
table,
tr,
td {
border: 1px solid;
text-align: center;
padding-top: auto;
padding-right: auto;
padding-left: auto;
padding-bottom: auto;
}
table {
margin-inline: auto 0; /* added this */
}
<div>
<table>
<tbody>
<tr>
<td>Monday</td>
<td>0900 - 1800</td>
</tr>
<tr>
<td>Tuesday</td>
<td>0900 - 1800</td>
</tr>
<tr>
<td>Wednesday</td>
<td>0900 - 1800</td>
</tr>
<tr>
<td>Thursday</td>
<td>0900 - 1800</td>
</tr>
<tr>
<td>Friday</td>
<td>0900 - 1800</td>
</tr>
<tr>
<td>Saturday</td>
<td>0900 - 1700</td>
</tr>
</tbody>
</table>
</div>
<div class="openingtimes">
<br>
<b>All major card types accepted including contactless </b><br>
<br>
<img src="https://stylebyjulie.co.uk/wp-content/uploads/2021/10/paymentmethods.png" alt="style by julie payment methods" width="227" height="28" align="right">
<br><br>
<b>Supporting (click to find out more)</b><br><br>
<a href="https://stylebyjulie.co.uk/little-princess-trust/">
<img title="little princess trust" src="https://stylebyjulie.co.uk/wp-content/uploads/2021/10/littleprincess-logo.png" alt="little princess trust" width="138" height="111" align="right"></a>
</div>

Why are my table rows much taller than the text content?

I'm working on learning HTML, CSS, and JS on the side, but started messing around with making a new email signature at work and am running into an issue I'm hoping someone can help me out with.
What I'm hoping for:
What I'm getting: https://codepen.io/spacemanspiff_/pen/GRQzwQa
.verticalLine {
border-left: 15px solid #00205b;
height: 500px;
margin-left: 40px;
margin-right: 40px;
margin-bottom: 0px;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
.container {
display: inline-flex;
}
.table1 {
margin-right: 20px;
}
body {
margin: 0;
font-family: "Fira Sans", ariel;
}
p {
white-space: nowrap;
}
<body>
<div class="container">
<table class="table1">
<tbody>
<tr>
<td><img src="ProfilePic.png" width="344" height="344" alt="profile phoot"></td>
<td rowspan="2">
<div class="verticalLine"></div>
</td>
</tr>
<tr>
<td align="center"><img src="LogoPlaceHolder.png" width="240" alt="korhorn financial group logo"></td>
</tr>
</tbody>
</table>
<table cellspacing="0">
<tbody>
<tr>
<td>
<p style="font-size: 75px; color: #00205b;">Employee Name</p>
</td>
</tr>
<tr>
<td>
<p style="font-size: 35px; font-weight: 200;">Employee Role</p>
</td>
</tr>
<tr>
<td>
<p style="font-size: 35px;"><strong>e.</strong>&nbsp&nbspemail#address.com</p>
</td>
</tr>
<tr>
<td>
<p style="font-size: 35px;"><strong>p.</strong>&nbsp&nbsp111-222-3333</p>
</td>
</tr>
<tr>
<td>
<p style="font-size: 35px;"><strong>w.</strong>&nbsp&nbspwww.website.com</p>
</td>
</tr>
<tr>
<td><img src="mapPin.png" width="45px" height="45px">&nbsp&nbsp&nbsp<img src="yt.png" width="45px" height="45px">&nbsp&nbsp&nbsp<img src="facebook.png" width="45px" height="45px">&nbsp&nbsp&nbsp<img src="Instagram.png" width="45px" height="45px">&nbsp&nbsp&nbsp
<img
src="Twitter.png" width="45px" height="45px"></td>
</tr>
</tbody>
</table>
</div>
</body>
I hate drag on about the things I've tried because I imagine you'll see it my code, but essentially what I was thinking I needed to do was put two tables inline. On the left would be the employee's profile pic and the logo below it, and a blue bar in the next column. In the second table would be the employee details and any appropriate links. What I'm getting is the rows in the 2nd table are ending up much larger than I want them, and I'm just not understanding why.
I guess what I was hoping for with the two tables was the ability to keep the information on the 2nd table tighter together, while allowing the info in the 1st table to span multiple rows. This could be the wrong approach altogether, so I'm open to any suggestions!
Thanks for the help!

Do you know how to inspect a document with your browser? Doing so shows that your paragraphs have a default size, mainly due to line height and margin, that is dramatically larger than the text itself.
Either don't use paragraphs or set their line height to zero or another small value and reduce margin. You'll then need to adjust margin on nearby elements to space them back out as needed.
.verticalLine {
border-left: 15px solid #00205b;
height: 500px;
margin-left: 40px;
margin-right: 40px;
margin-bottom: 0px;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
.container {
display: inline-flex;
}
.table1 {
margin-right: 20px;
}
body {
margin: 0;
font-family: "Fira Sans", ariel;
}
p {
white-space: nowrap;
line-height: 0;
margin: 5px;
}
<body>
<div class="container">
<table class="table1">
<tbody>
<tr>
<td><img src="ProfilePic.png" width="344" height="344" alt="profile phoot"></td>
<td rowspan="2">
<div class="verticalLine"></div>
</td>
</tr>
<tr>
<td align="center"><img src="LogoPlaceHolder.png" width="240" alt="korhorn financial group logo"></td>
</tr>
</tbody>
</table>
<table cellspacing="0">
<tbody>
<tr>
<td>
<p style="font-size: 75px; color: #00205b;">Employee Name</p>
</td>
</tr>
<tr>
<td>
<p style="font-size: 35px; font-weight: 200;">Employee Role</p>
</td>
</tr>
<tr>
<td>
<p style="font-size: 35px;"><strong>e.</strong>&nbsp&nbspemail#address.com</p>
</td>
</tr>
<tr>
<td>
<p style="font-size: 35px;"><strong>p.</strong>&nbsp&nbsp111-222-3333</p>
</td>
</tr>
<tr>
<td>
<p style="font-size: 35px;"><strong>w.</strong>&nbsp&nbspwww.website.com</p>
</td>
</tr>
<tr>
<td><img src="mapPin.png" width="45px" height="45px">&nbsp&nbsp&nbsp<img src="yt.png" width="45px" height="45px">&nbsp&nbsp&nbsp<img src="facebook.png" width="45px" height="45px">&nbsp&nbsp&nbsp<img src="Instagram.png" width="45px" height="45px">&nbsp&nbsp&nbsp
<img src="Twitter.png" width="45px" height="45px"></td>
</tr>
</tbody>
</table>
</div>
</body>

HTML code for formatting the table cell values in headers of table?

I can't figure out, how do I create a table header style similar to the one in the image? Also, how can I make the name and picture area into a block and add those two borders?
Oh, and how come my icons for my list turned out to be chinese characters, I copied the code for the sideways triangle, but it came out as that. And the codes weren't working for the phone/email either so I ended up using a picture of them instead. HTML code is below:
body {
font-family: Arial;
font-size: 12px;
width: 800px;
}
table {
border: 1px solid black;
border-collapse: collapse;
}
th {
text-align: left;
background-color: lightblue;
border: none;
padding: 3px;
}
td {
border: none;
padding: 10px
}
ul {
list-style: none;
padding: 0px;
}
ul li:before {
content: '\9654';
margin: 0 1em;
}
<table style="float:right; width: 300px;">
<tr>
<th colspan="2">Contact</th>
</tr>
<tr>
<td style="padding: 3px"><img src="phone.jpg" alt="HTML5 Icon" style="float: left;">: 747-357-2004</td>
<td style="padding: 3px">54th Street,</br>17th Floor,</td>
</tr>
<tr>
<td style="padding: 3px"><img src="phone.jpg" alt="HTML5 Icon" style="float: left;">: 327-127-8390</td>
<td style="padding: 3px">New York,</br>United States.</td>
</tr>
<tr>
<td style="padding: 3px"><img src="email.jpg" alt="HTML5 Icon" style="float: left;">: rachelgarner#gmail.com</td>
<td style="padding: 3px">NY 10022</td>
</tr>
</table>
</br>
</br>
<p><img src="rachel_garner.jpg" alt="HTML5 Icon" style="float: left;">
<span style="font-size: 25px"><b>RACHEL GARNER</b></span>
</br><span style="color: orange">MARKETING MANAGER</span></br>
</br>
</br>
</br><span style="color: blue">www.google.com</span></p>
<table width="100%">
<tr>
<th colspan="2">Profile</th>
</tr>
<tr>
<td><b>Personal Statement:</b></td>
<td>Experienced in administrative duties; scheduled meetings, handled travel arrangements and purchasing. Computer skills include Microsoft Excel, Access, Word, and PowerPoint. Excellent problem solving and communication skills. Accustomed to long work
hours. Winner: Employee of the Month 1999 for October and December.</td>
</tr>
<tr>
<td><b>Career Objective:</b></td>
<td>To obtain an executive sales/marketing management position within a growth oriented, progressive company. I want to apply my business development/sales skills to an environment where they will make a significant impact on the bottom line. The idea
atmosphere would be entrepreneurial and one in which new ideas are welcome and decision making is required.</td>
</table>
</br>
<table width="100%">
<tr>
<th>Key Skills</th>
</tr>
<tr>
<td>This is a main summary of my skills.</td>
</tr>
<tr>
<td>
<ul>
<li>Negotiating (Intermediate)</li>
<li>Access (Beginner)</li>
<li>Accounting (Beginner)</li>
<li>Sales Auditing (Expert)</li>
<li>Invoicing (Intermediate)</li>
</ul>
</td>
</tr>
</table>
</br>
<table width="100%">
<tr>
<th>Education</th>
</tr>
<tr>
<td><b>Bachelor's Degree</b> - <i>Marketing</i> <span style="float: right;"><b>2002 - 2006</b></span></td>
</tr>
<tr>
<td><b>The University of Mississippi</b>, MS</td>
</tr>
<tr>
<td>Bachelor of Business Administration May 2001 Major: Marketing, Minor: International Business Overall GPA: 3.0, Major GPA: 3.3</td>
</tr>
</table>
</br>
<table width="100%">
<tr>
<th>Work Experience</th>
</tr>
<tr>
<td><b>University Hallmark Oxford, MS <span style="float:right;"><i>Full Time</i></span></b></td>
</tr>
<tr>
<td><b>Sales Clerk</b><i> (Invoicing, Administration)</i> <span style="float:right;"><b>Oct 2001 to Present</b></span></td>
</tr>
<tr>
<td>Full time roll overseeing the operation of the sales and marketing department.</td>
</tr>
<tr>
<td>
<ul>
<li>Successfully perform managerial duties during manager's absence</li>
<li>Train new employees and conduct company and product orientations</li>
</ul>
</td>
</tr>
</table>

Without the example image of how the headers are required to look it is impossible to answer the first part of the question.
This is however distinct from the second part about icons. You appear to be using the HTML code for the icons in the content of the arrow pseudo element for example this gives you a completely different character. You need to use the Unicode values. See e.g. Wikipedia
For a right arrow try this:
content: '\25b6'
Note that browsers render these types of character in their own ways.

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>Back to the Lounge</p>
<footer>
©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

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>Back to the Lounge</p>
<footer>
©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!

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>Back to the Lounge</p>
<footer>
©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>

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;
}

Space around the image in a table issue

I am facing an issue with the white space around the image in table.
My code :
<table style="font-size: 18px; width: 60%; color: #ffffff; margin: 0 auto; border-collapse: collapse; cellspacing=0px;">
<tr>
<td style="width:22px; height:22px;"><img src="img/top_left_corner.png"/></td>
<td style="background-color:#00385e;"></td>
<td><img src="img/top_right_corner.png"/></td>
</tr>
<tr>
<td style="background-color:#00385e;"></td>
<td style="background-color:#00385e;">
Please join us on Thursday 15th May to celebrate Global Accessibility Awareness Day and to find out more about the importance of web accessibility.</br></br>
<b>Location: </b> Manyata Tech Park - G2 4th Floor - Board Room</br>
<b>Date: </b> 15th May 2014 (Thursday)</br>
<b>Time: </b> 3pm to 4pm</br>
</td>
<td style="background-color:#00385e;"></td>
</tr>
<tr>
<td><img src="img/bottom_left_corner.png"/></td>
<td style="background-color:#00385e;"></td>
<td><img src="img/bottom_right_corner.png"/></td>
</tr>
</table>
The table is looking like:
How can I fix this?

Give padding:0 to all tds
table td{
padding:0;
}
Hope this will do the job!

Add this to css:
img{
display:block;
}