I have been reading the book of head first html and CSS 2nd and I found on Page627 there are unexpected vertical showed in a table. Could anyone tell me what is the problem.
Here is the html and CSS code:
#font-face {
font-family: "Emblema One";
src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"), url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf");
}
body {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
}
h1,
h2 {
color: #cc6600;
border-bottom: thin dotted #888888;
}
h1 {
font-family: "Emblema One", sans-serif;
font-size: 220%;
}
h2 {
font-size: 130%;
font-weight: normal;
}
blockquote {
font-style: italic;
}
table {
margin-left: 20px;
margin-right: 20px;
border: thin solid black;
caption-side: bottom;
border-collapse: collapse;
}
table table th {
background-color: white;
}
td,
th {
border: thin dotted gray;
padding: 5px;
}
th {
background-color: #cc6600;
}
.cellcolor {
background-color: #fcba7a;
}
caption {
font-style: italic;
padding-top: 8px;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
li {
/* list-style-image: url(images/backpack.gif); */
padding-top: 5px;
margin-left: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Trip Around the USA on a Segway</title>
<link type="text/css" rel="stylesheet" href="journal.css">
</head>
<body>
<h1>Segway'n USA</h1>
<p>
Documenting my trip around the US on my very own Segway!
</p>
<h2>August 20, 2012</h2>
<p><img src="images/segway2.jpg" alt="Me any my Segway in New Mexico"></p>
<p>
Well I made it 1200 miles already, and I passed through some interesting places on the way:
</p>
<table>
<caption>
The cities I visited on my Segway'n USA travels
</caption>
<tr>
<th>City</th>
<th>Date</th>
<th>Temperature</th>
<th>Altitude</th>
<th>Population</th>
<th>Diner Rating</th>
</tr>
<tr>
<td>Walla Walla, WA</td>
<td class="center">June 15th</td>
<td class="center">75</td>
<td class="right">1,204 ft</td>
<td class="right">29,686</td>
<td class="center">4/5</td>
</tr>
<tr class="cellcolor">
<td>Magic City, ID</td>
<td class="center">June 25th</td>
<td class="center">74</td>
<td class="right">5,312 ft</td>
<td class="right">50</td>
<td class="center">3/5</td>
</tr>
<tr>
<td>Bountiful, UT</td>
<td class="center">July 10th</td>
<td class="center">91</td>
<td class="right">4,226 ft</td>
<td class="right">41,173</td>
<td class="center">4/5</td>
</tr>
<tr class="cellcolor">
<td>Last Chance, CO</td>
<td class="center">July 23rd</td>
<td class="center">102</td>
<td class="right">4,780 ft</td>
<td class="right">265</td>
<td class="center">3/5</td>
</tr>
<tr>
<td rowspan="2">Truth or Consequences, NM</td>
<td class="center">August 9th</td>
<td class="center">93</td>
<td rowspan="2" class="right">4,242 ft</td>
<td rowspan="2" class="right">7,289</td>
<td class="center">5/5</td>
</tr>
<tr>
<td class="center">August 27th</td>
<td class="center">98</td>
<td class="center">
<table>
<tr>
<th>Tess</th>
<td>5/5</td>
</tr>
<tr>
<th>Tony</th>
<td>4/5</td>
</tr>
</table>
</td>
</tr>
<tr class="cellcolor">
<td>Why, AZ</td>
<td class="center">August 18th</td>
<td class="center">104</td>
<td class="right">860 ft</td>
<td class="right">480</td>
<td class="center">3/5</td>
</tr>
</table>
<h2>July 14, 2012</h2>
<p>
I saw some Burma Shave style signs on the side of the road today:
</p>
<blockquote>
<p>
Passing cars, <br> When you can't see, <br> May get you, <br> A glimpse, <br> Of eternity. <br>
</p>
</blockquote>
<p>
I definitely won't be passing any cars.
</p>
<h2>June 2, 2012</h2>
<p><img src="images/segway1.jpg" alt="The first day of the trip"></p>
<p>
My first day of the trip! I can't believe I finally got everything packed and ready to go. Because I'm on a Segway, I wasn't able to bring a whole lot with me:
</p>
<ul>
<li>cellphone</li>
<li>iPod</li>
<li>digital camera</li>
<li>and a protein bar</li>
</ul>
<p>
Just the essentials. As Lao Tzu would have said, <q>A journey of a
thousand miles begins with one Segway.</q>
</p>
<!--
<p>
To do list:
</p>
<ul>
<li>Charge Segway</li>
<li>Pack for trip
<ul>
<li>cellphone</li>
<li>iPod</li>
<li>digital camera</li>
<li>a protein bar</li>
</ul>
</li>
</ul>
-->
</body>
</html>
Related
"I am working on creating an HTML template for an invoice and am having some difficulty placing the QR code image in the correct location. Specifically, I want the QR code image to appear directly under the invoice information table, but it is not appearing in the desired location.
table {
border-collapse: collapse;
font-family: Arial, sans-serif;
margin: 10px auto;
font-size: 14px;
color: #1e2b40;
}
td,
th {
border: 1px solid gray;
padding: 6px;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
.bold {
font-weight: bold;
}
.contact-info {
font-family: Arial, sans-serif;
font-size: 12px;
float: right;
margin: 1px auto;
font-weight: normal;
}
.contact-info ul {
list-style-type: none;
}
.qr-code {
clear: both;
display: block;
width: 300px;
height: 300px;
margin: 0 auto;
}
.srs.logo {
width: 300px;
height: 150px;
margin: 10px auto;
}
.items-table {
float: left;
padding: 6px;
margin: 10px auto;
border-collapse: collapse;
width: 100%;
}
.items-table th,
.items-table td {
border: 1px solid gray;
padding: 6px;
<header>
<!-- header content goes here -->
<img src="https://drive.google.com/file/d/1mwNaPe8w4Bxn7mkXivmI2dqcwBg4_aog" alt="srs-logo" />
<div class="contact-info" style="list-style-type: none">
<ul>
<li>SARL RO SOLUTION</li>
<li>RC: RC:</li>
<li>NIF: NIF</li>
<li>AI: AI</li>
<li>Phone: Phone:</li>
<li>Email: info#company.com</li>
</ul>
</div>
</header>
<hr style="margin-top: 100px;">
<!-- rest of the page content goes here -->
<table style="float: left;">
<tr>
<td colspan="2" class="center bold">Customer Information</td>
<tr>
<tr>
<td>Customer Name:</td>
<td><<[Customer Name]>></td>
</tr>
<tr>
<td>Customer Address:</td>
<td><<[Customer Address]>></td>
</tr>
<tr>
<td>Customer NIF:</td>
<td><<[Customer NIF]>></td>
</tr>
<tr>
<td>Customer RC:</td>
<td><<[Customer RC]>></td>
</tr>
<tr>
<td>Customer AI:</td>
<td><<[Customer AI]>></td>
<tr>
<td>Telephone:</td>
<td><<[Company AI]>></td>
</tr>
</table>
<table style="float: right; margin: 0 auto">
<tr>
<td colspan="2" class="center bold">Invoice Information</td>
<tr>
<td>Invoice Date:</td>
<td><<[Invoice Date]>></td>
<tr>
<td>Invoice ID:</td>
<td><<[Invoice ID]>></td>
</tr>
</table>
<br style="clear: both;">
<img src="<<[Invoice Date]>>" alt="qr-code">
<br style="clear: both;">
<hr>
<table style="float: left;">
<tr>
<td rowspan="1" class="center bold">Related Sales</td>
<td colspan="" class="center bold">Invoice Information</td>
</table>
<br style="clear: both;">
<hr>
<table class="items-table">
<thead>
<tr>
<th>Item description</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<p class="startifend"><<Start:[invoice_key].[Related invoice_items]>></p>
<tr>
<td><<[description]>></td>
<td><<[quantity]>></td>
<td><<[unit_price]>></td>
<td><<[total_price]>></td>
</tr>
<p class="startifend"><<End>></p>
</tbody>
</table>
<br style="clear: both;">
<hr>
I'm going to presume you have a good reason for using tables over grid/flexbox.
A couple of issues to note. Firstly, be very care to always close your <tr> tags there were many unclosed tags through the code which I've corrected in the below snippet.
Secondly, the behaviour of the QR img tag was completely correct in your example and it was rendering where it should have been. In order to achieve the desired outcome, you want to put your Customer Information and Invoice Information tables inside a parent table.
In short:
<table>
<tr>
<td> <!-- Customer Information Table --> </td>
<td> <!-- Invoice Information Table --> </td>
</tr>
</table>
This will allow you to but the QR img directly underneath the Invoice Information Table inside the same <td> tag.
table {
border-collapse: collapse;
font-family: Arial, sans-serif;
margin: 10px auto;
font-size: 14px;
color: #1e2b40;
}
td,
th {
border: 1px solid gray;
padding: 6px;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
.bold {
font-weight: bold;
}
.contact-info {
font-family: Arial, sans-serif;
font-size: 12px;
float: right;
margin: 1px auto;
font-weight: normal;
}
.contact-info ul {
list-style-type: none;
}
.qr-code {
clear: both;
display: block;
width: 300px;
height: 300px;
margin: 0 auto;
}
.srs.logo {
width: 300px;
height: 150px;
margin: 10px auto;
}
.items-table {
float: left;
padding: 6px;
margin: 10px auto;
border-collapse: collapse;
width: 100%;
}
.items-table th,
.items-table td {
border: 1px solid gray;
padding: 6px;
<header>
<!-- header content goes here -->
<img src="https://drive.google.com/file/d/1mwNaPe8w4Bxn7mkXivmI2dqcwBg4_aog" alt="srs-logo" />
<div class="contact-info" style="list-style-type: none">
<ul>
<li>SARL RO SOLUTION</li>
<li>RC: RC:</li>
<li>NIF: NIF</li>
<li>AI: AI</li>
<li>Phone: Phone:</li>
<li>Email: info#company.com</li>
</ul>
</div>
</header>
<hr style="margin-top: 100px;">
<!-- rest of the page content goes here -->
<table style="border:0; width:100%;">
<tr>
<td style="border:0; vertical-align:top">
<table style="float:left;margin:0">
<tr>
<td colspan="2" class="center bold">Customer Information</td>
</tr>
<tr>
<td>Customer Name:</td>
<td><<[Customer Name]>></td>
</tr>
<tr>
<td>Customer Address:</td>
<td><<[Customer Address]>></td>
</tr>
<tr>
<td>Customer NIF:</td>
<td><<[Customer NIF]>></td>
</tr>
<tr>
<td>Customer RC:</td>
<td><<[Customer RC]>></td>
</tr>
<tr>
<td>Customer AI:</td>
<td><<[Customer AI]>></td>
</tr>
<tr>
<td>Telephone:</td>
<td><<[Company AI]>></td>
</tr>
</table>
</td>
<td style="border:0; vertical-align:top;text-align:right;">
<table style="float:right;">
<tr>
<td colspan="2" class="center bold">Invoice Information</td>
</tr>
<tr>
<td>Invoice Date:</td>
<td><<[Invoice Date]>></td>
</tr>
<tr>
<td>Invoice ID:</td>
<td><<[Invoice ID]>></td>
</tr>
</table>
<br style="clear:both;">
<img src="<<[Invoice Date]>>" alt="qr-code">
</td>
</tr>
</table>
<br style="clear: both;">
<hr>
<table style="float: left;">
<tr>
<td rowspan="1" class="center bold">Related Sales</td>
<td colspan="" class="center bold">Invoice Information</td>
</tr>
</table>
<br style="clear: both;">
<hr>
<table class="items-table">
<thead>
<tr>
<th>Item description</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<p class="startifend"><<Start:[invoice_key].[Related invoice_items]>></p>
<tr>
<td><<[description]>></td>
<td><<[quantity]>></td>
<td><<[unit_price]>></td>
<td><<[total_price]>></td>
</tr>
<p class="startifend"><<End>></p>
</tbody>
</table>
<br style="clear: both;">
<hr>
This should do the trick, added a container to the tables and applied flex box. Remove the margin from the table selector, if you want the tables to go to the left and right edges.
<div style="display:flex;justify-content:space-between;">
<table>
<tr>
<td colspan="2" class="center bold">Customer Information</td>
<tr>
<tr>
<td>Customer Name:</td>
<td><<[Customer Name]>></td>
</tr>
<tr>
<td>Customer Address:</td>
<td><<[Customer Address]>></td>
</tr>
<tr>
<td>Customer NIF:</td>
<td><<[Customer NIF]>></td>
</tr>
<tr>
<td>Customer RC:</td>
<td><<[Customer RC]>></td>
</tr>
<tr>
<td>Customer AI:</td>
<td><<[Customer AI]>></td>
<tr>
<td>Telephone:</td>
<td><<[Company AI]>></td>
</tr>
</table>
<table>
<tr>
<td colspan="2" class="center bold">Invoice Information</td>
<tr>
<td>Invoice Date:</td>
<td><<[Invoice Date]>></td>
<tr>
<td>Invoice ID:</td>
<td><<[Invoice ID]>></td>
</tr>
</table>
</div>
<img style="float:right;" src="<<[Invoice Date]>>" alt="qr-code">
Trying to build some webpages that contain various tables - e.g. main table that is holding a header - main page and a footer of a page - marked 2 on the picture.
In the main section of this table I have a lot of tables that shows various data for the user - marked 1 on the picture, so I have added specific style for this tables, it looks like this:
.datatable {
border-collapse: collapse; /* hiding double lines between cells */
border: 2px solid white; /* hiding border of a table */
}
.datatable th, td
{
padding: 5px 10px;
border: 1px solid black; /* adding a border for th and td */
}
.datatable th {
background-color: #EBECEC;
font-weight: bold;
vertical-align: bottom;
}
.datatable tr:nth-child(odd) {
background-color: #EBECEC;
}
And these tables, classed with .datatable works fine and seems it's ok. when showing it's in browser.
But table which contains this tables (2) with data inside (1) - also have some borders over it's cells. My css doesn't contain any directives referring properties of simple tables, and such tables were showed without any borders (border="0" property of a table tag).
How to fix it? How to control the properties of table 2?
it seems the browser gets the properties of .datatable class and applied it to table or td of the upper-level table (inheritance or some)..
The codepen is here: https://codepen.io/gzbqqfbl-the-encoder/pen/QWqrBxP
Those borders belong to the first td in the first table so something like this (put at the end of the stylesheet to override anything else that might be inserted above)
table:first-child tr td:first-child { border: none;}
Here it is in a snippet:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<title>Dietonline Service. Результаты расчета потребности в основных пищевых веществах и энергии </title>
<link href="style.css" rel="stylesheet">
<style>
html,
body {
background-color: White;
font-family: rubik, sans-serif, san-serif;
font-size: 14 px;
}
table.datatable {
border-collapse: collapse;
/* hiding double lines between cells */
border: 2px solid white;
/* hiding border of a table */
}
.datatable th,
td {
padding: 5px 10px;
border: 1px solid black;
/* adding a border for th and td */
}
.datatable th {
background-color: #EBECEC;
font-weight: bold;
vertical-align: bottom;
}
.datatable tr:nth-child(odd) {
background-color: #EBECEC;
}
h1,
h2,
h3 {
color: #36CA36
}
a:link {
text-decoration: underline;
color: #36CA36;
}
a:visited {
text-decoration: underline;
color: #36CA36;
}
a:hover {
text-decoration: none;
color: #FB6737;
}
a:active {
text-decoration: underline;
color: #36CA36;
}
table {
border-collapse: collapse;
/* hiding double lines between cells */
border: 0px solid grey;
/* hiding border of a table */
}
table:first-child tr td:first-child {
border: none;
}
</style>
</head>
<body style="margin: 0; padding: 0;">
<!--maintable-->
<table border="0" cellpadding="0" cellspacing="0" width="99%">
<tr>
<td>
<!-- 6oo px center table -->
<table align="center" cellpadding="0" cellspacing="0" width="600" border="0" style="border">
<tr>
<td align="center" bgcolor="#ffffff" style="padding: 20px 0 10px 0;">
<img src="img/sample_logo.jpg" width="200" style="display: block;">
<h3>Питание и Здоровье</h3>
</td>
</tr>
<tr>
<!--main content td-->
<td style="padding: 10px 15px 20px 15px;">
<h2>Результаты расчета индивидуальных потребностей основных пищевых веществ и энергии</h2>
<!--provided data-->
<table width=100% class="datatable">
<tr>
<th colspan='2'>Данные, предоставленные пользователем для расчета</th< /tr>
<tr>
<td>Пол</td>
<td>женский</td>
</tr>
<tr>
<td>Возраст</td>
<td>11</td>
</tr>
<tr>
<td>Вес</td>
<td>60</td>
</tr>
<tr>
<td>Коэффициент физической активности</td>
<td>1.4</td>
</tr>
<tr>
<td>Дополнительная информация</td>
<td>kid 6 year school</td>
</tr>
</table><br /> <a href='new_query?'>Неверно указаны параметры? Проведите еще один расчет ...</a>
<!--provided data end -->
<h3>Результаты расчета</h3>
<!-- proteins & energy table -->
<table width="100%" class="datatable">
<tr>
<th colspan="2">Суточная потребность в белках, жирах, углеводах и энергии</th>
</tr>
<tr>
<td>Энергия, ккал</td>
<td>2400.0</td>
</tr>
<tr>
<td>Белки, г</td>
<td>80.0</td>
</tr>
<tr>
<td>Белки животного происхождения, г</td>
<td>57.0</td>
</tr>
<tr>
<td>Жиры, г</td>
<td>78.0</td>
</tr>
<tr>
<td>Углеводы, г</td>
<td>346.0</td>
</tr>
</table>
<br />
<!--proteins and energy table end-->
<table width="100%" class="datatable">
<tr>
<th colspan="2">Суточная потребность в минералах</th>
</tr>
<tr>
<td>Кальций, мг</td>
<td>1200.0</td>
</tr>
<tr>
<td>Фосфор, мг</td>
<td>1200.0</td>
</tr>
<tr>
<td>Магний, мг</td>
<td>300.0</td>
</tr>
<tr>
<td>Железо, мг</td>
<td>17.0</td>
</tr>
<tr>
<td>Цинк, мг</td>
<td>12.0</td>
</tr>
<tr>
<td>Йод, мкг</td>
<td>160.0</td>
</tr>
<tr>
<td>Селен, мкг</td>
<td>55.0</td>
</tr>
<tr>
<td>Медь, мг</td>
<td>1.8</td>
</tr>
<tr>
<td>Марганец, мг</td>
<td>0.0</td>
</tr>
<tr>
<td>Хром, мкг</td>
<td>0.0</td>
</tr>
<tr>
<td>Молибден, мкг</td>
<td>0.0</td>
</tr>
</table><br />
<table width="100%" class="datatable">
<tr>
<th colspan="2">Суточная потребность в витаминах</th>
</tr>
<tr>
<td>Витамин А, мкг РЕ</td>
<td>600.0</td>
</tr>
<tr>
<td>Биотин, мкг</td>
<td>25.0</td>
</tr>
<tr>
<td>Пантотеновая кислота, мг</td>
<td>4.0</td>
</tr>
</table>
<br />
<table width="100%" class="datatable">
<tr>
<th colspan="2">Рекомендованные нормы потребления минорных и биологически активных веществ еды с установленным физиологическим действием на организм</th>
</tr>
<tr>
<td>Каротиноиды, мг</td>
<td>15</td>
</tr>
<tr>
<td>Бета-каротин, мг</td>
<td>5</td>
</tr>
</table>
<br />
</td>
</tr>
<tr>
<td bgcolor="#EBECEC" style="padding: 20px 20px 20px 20px;">
©Dietonline Service, 2022
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
See this class:
.divDutySlip {
width: 90mm;
min-height: 120mm;
padding: 2mm;
/*float:left;
position: relative; */
margin: 2mm;
border: 1px solid #000000;
page-break-inside: avoid;
}
I have commented out two styles. Commenting them out causing the content to page-break correct. No "Duty Slip" is split across a page:
Now, if I introduce the float and position styles and try again the page break logic fails. If I try to print landscape then I get slips side by side but they still split on page breaks. This example is with a lot more content and I have blocked out the names:
So how can I fill the page with these slips and prevent splitting over page breaks? At the moment the only way I can do it is by commenting out those styles and limiting to one column of duty slips.
CSS:
body {
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
font-size: 12pt;
text-align: left;
color: #000000;
background-color: #ffffff;
}
.divDutySlip {
width: 90mm;
min-height: 120mm;
padding: 2mm;
/*float:left;
position: relative; */
margin: 2mm;
border: 1px solid #000000;
page-break-inside: avoid;
}
.textTitle {
font-size: 14pt;
font-weight: 700;
}
.textName {
font-size: 12pt;
}
.tableDutySlip {
width: 100%;
border:1px black solid;
border-collapse:collapse;
}
.tableDutySlip td {
border:1px black solid;
}
.cellHeading {
font-weight: 700;
background-color: #808080;
}
.cellDate {
}
.cellAssignments {
}
.columnDate {
width: 25%;
}
.columnAssignments {
width: 75%;
}
#media screen
{
br { display: none; }
}
HTML:
<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="SRRSchedule-Duty%20Slips1.css" rel="stylesheet" type="text/css" />
<title>Assignment Duties</title>
</head>
<body>
<div class="divDutySlip">
<h1 class="textTitle">Assignment Duties</h1>
<h2 class="textName">Test1</h2>
<table class="tableDutySlip">
<colgroup>
<col class="columnDate" /><col class="columnAssignments" />
</colgroup>
<tr>
<td class="cellHeading">Date</td>
<td class="cellHeading">Assignments</td>
</tr>
<tr>
<td class="cellDate">Thu, Apr 9</td>
<td class="cellAssignments">Mic Left, Mic Right</td>
</tr>
<tr>
<td class="cellDate">Sun, Apr 12</td>
<td class="cellAssignments">Watchtower Reader</td>
</tr>
<tr>
<td class="cellDate">Thu, Apr 16</td>
<td class="cellAssignments">Mic Left, Mic Right</td>
</tr>
</table>
</div>
<div class="divDutySlip">
<h1 class="textTitle">Assignment Duties</h1>
<h2 class="textName">Test2</h2>
<table class="tableDutySlip">
<colgroup>
<col class="columnDate" /><col class="columnAssignments" />
</colgroup>
<tr>
<td class="cellHeading">Date</td>
<td class="cellHeading">Assignments</td>
</tr>
<tr>
<td class="cellDate">Sun, Apr 12</td>
<td class="cellAssignments">Mic Left, Mic Right</td>
</tr>
<tr>
<td class="cellDate">Sun, Apr 19</td>
<td class="cellAssignments">Mic Left, Mic Right</td>
</tr>
</table>
</div>
<div class="divDutySlip">
<h1 class="textTitle">Assignment Duties</h1>
<h2 class="textName">test3</h2>
<table class="tableDutySlip">
<colgroup>
<col class="columnDate" /><col class="columnAssignments" />
</colgroup>
<tr>
<td class="cellHeading">Date</td>
<td class="cellHeading">Assignments</td>
</tr>
<tr>
<td class="cellDate">Sun, Apr 19</td>
<td class="cellAssignments">Watchtower Reader</td>
</tr>
</table>
</div>
</body>
</html>
Fiddle:
https://jsfiddle.net/e3kradLh/
In case if you would like to have all the dutyslips in one page you can create a wrapper div for all the dutyslips and add display flex style to it.
https://jsfiddle.net/jhbktoya/1/
body {
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
font-size: 12pt;
text-align: left;
color: #000000;
background-color: #ffffff;
}
.wrapper {
display: flex;
}
.divDutySlip {
width: 90mm;
min-height: 120mm;
padding: 2mm;
margin: 2mm;
border: 1px solid #000000;
page-break-inside: avoid;
}
.textTitle {
font-size: 14pt;
font-weight: 700;
}
.textName {
font-size: 12pt;
}
.tableDutySlip {
width: 100%;
border: 1px black solid;
border-collapse: collapse;
}
.tableDutySlip td {
border: 1px black solid;
}
.cellHeading {
font-weight: 700;
background-color: #808080;
}
.cellDate {}
.cellAssignments {}
.columnDate {
width: 25%;
}
.columnAssignments {
width: 75%;
}
#media screen {
br {
display: none;
}
}
<div class='wrapper'>
<div class="divDutySlip">
<h1 class="textTitle">Assignment Duties</h1>
<h2 class="textName">Test1</h2>
<table class="tableDutySlip">
<colgroup>
<col class="columnDate" />
<col class="columnAssignments" />
</colgroup>
<tbody>
<tr>
<td class="cellHeading">Date</td>
<td class="cellHeading">Assignments</td>
</tr>
<tr>
<td class="cellDate">Thu, Apr 9</td>
<td class="cellAssignments">Mic Left, Mic Right</td>
</tr>
<tr>
<td class="cellDate">Sun, Apr 12</td>
<td class="cellAssignments">Watchtower Reader</td>
</tr>
<tr>
<td class="cellDate">Thu, Apr 16</td>
<td class="cellAssignments">Mic Left, Mic Right</td>
</tr>
</tbody>
</table>
</div>
<div class="divDutySlip">
<h1 class="textTitle">Assignment Duties</h1>
<h2 class="textName">Test2</h2>
<table class="tableDutySlip">
<colgroup>
<col class="columnDate" />
<col class="columnAssignments" />
</colgroup>
<tbody>
<tr>
<td class="cellHeading">Date</td>
<td class="cellHeading">Assignments</td>
</tr>
<tr>
<td class="cellDate">Sun, Apr 12</td>
<td class="cellAssignments">Mic Left, Mic Right</td>
</tr>
<tr>
<td class="cellDate">Sun, Apr 19</td>
<td class="cellAssignments">Mic Left, Mic Right</td>
</tr>
</tbody>
</table>
</div>
<div class="divDutySlip">
<h1 class="textTitle">Assignment Duties</h1>
<h2 class="textName">test3</h2>
<table class="tableDutySlip">
<colgroup>
<col class="columnDate" />
<col class="columnAssignments" />
</colgroup>
<tbody>
<tr>
<td class="cellHeading">Date</td>
<td class="cellHeading">Assignments</td>
</tr>
<tr>
<td class="cellDate">Sun, Apr 19</td>
<td class="cellAssignments">Watchtower Reader</td>
</tr>
</tbody>
</table>
</div>
</div>
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;
}
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.