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>
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">
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>  email#address.com</p>
</td>
</tr>
<tr>
<td>
<p style="font-size: 35px;"><strong>p.</strong>  111-222-3333</p>
</td>
</tr>
<tr>
<td>
<p style="font-size: 35px;"><strong>w.</strong>  www.website.com</p>
</td>
</tr>
<tr>
<td><img src="mapPin.png" width="45px" height="45px">   <img src="yt.png" width="45px" height="45px">   <img src="facebook.png" width="45px" height="45px">   <img src="Instagram.png" width="45px" height="45px">   
<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>  email#address.com</p>
</td>
</tr>
<tr>
<td>
<p style="font-size: 35px;"><strong>p.</strong>  111-222-3333</p>
</td>
</tr>
<tr>
<td>
<p style="font-size: 35px;"><strong>w.</strong>  www.website.com</p>
</td>
</tr>
<tr>
<td><img src="mapPin.png" width="45px" height="45px">   <img src="yt.png" width="45px" height="45px">   <img src="facebook.png" width="45px" height="45px">   <img src="Instagram.png" width="45px" height="45px">   
<img src="Twitter.png" width="45px" height="45px"></td>
</tr>
</tbody>
</table>
</div>
</body>
I cannot get this to work for the life of me. I want to have both tables side by side on the same line and have the h4 tag over top of the right table it is suppose to be with. I can get the tables side by side without the h4 tags but i want the h4 tags. Also for these tables to be one on the left and one on the right. Sorry if this is a lot.
This is what I have so far.
.table1,
#tableTitle1 {
float: left;
display: inline-block;
}
.table2,
#tableTitle2 {
float: right;
display: inline-block;
}
.table1,
.table2 {
height: 230px;
display: inline-block;
text-align: center;
}
table,
td,
th {
border: 1px solid black;
padding: 5px;
border-spacing: 3px;
}
<!--First Table-->
<h4 id="tableTitle1">Graduates Status 2015</h4>
<table class="table1">
<tr>
<th>Graduates</th>
<th>Status</th>
</tr>
<tr>
<td>5218</td>
<td>Available for Employment</td>
</tr>
<tr>
<td>936</td>
<td>Future Education</td>
</tr>
<tr>
<td>158</td>
<td>Not Seeking Employment</td>
</tr>
<tr>
<td>1866</td>
<td>Unable to Contact</td>
</tr>
</table>
<!--Second Table-->
<h4 id="tableTitle1">Graduates Employment Rates</h4>
<table class="table2">
<tr>
<th>Graduates</th>
<th>Employment Rates (100%)</th>
</tr>
<tr>
<td>Employment Related (Full-time)</td>
<td>46.1%</td>
</tr>
<tr>
<td>Employment Related (Part-time)</td>
<td>8.3%</td>
</tr>
<tr>
<td>Employment Unrelated (Full-time)</td>
<td>19.8%</td>
</tr>
<tr>
<td>Employment Unrelated (Part-time)</td>
<td>16.2</td>
</tr>
<tr>
<td>Not Employment</td>
<td>19%</td>
</tr>
</table>
Why not simply add the title as table caption, here with an extra wrapper to keep them side-by-side, top aligned.
.tablewrap {
white-space: nowrap;
}
#tableTitle1,
#tableTitle2 {
font-size: 20px;
font-weight: bold;
padding: 10px 0;
}
.table1,
.table2 {
height: 230px;
display: inline-table;
text-align: center;
white-space: normal;
vertical-align: top;
}
table,
td,
th {
border: 1px solid black;
padding: 5px;
border-spacing: 3px;
}
<div class="tablewrap">
<!--First Table-->
<table class="table1">
<caption id="tableTitle1">
Graduates Status 2015
</caption>
<tr>
<th>Graduates</th>
<th>Status</th>
</tr>
<tr>
<td>5218</td>
<td>Available for Employment</td>
</tr>
<tr>
<td>936</td>
<td>Future Education</td>
</tr>
<tr>
<td>158</td>
<td>Not Seeking Employment</td>
</tr>
<tr>
<td>1866</td>
<td>Unable to Contact</td>
</tr>
</table>
<!--Second Table-->
<table class="table2">
<caption id="tableTitle1">Graduates Employment Rates</caption>
<tr>
<th>Graduates</th>
<th>Employment Rates (100%)</th>
</tr>
<tr>
<td>Employment Related (Full-time)</td>
<td>46.1%</td>
</tr>
<tr>
<td>Employment Related (Part-time)</td>
<td>8.3%</td>
</tr>
<tr>
<td>Employment Unrelated (Full-time)</td>
<td>19.8%</td>
</tr>
<tr>
<td>Employment Unrelated (Part-time)</td>
<td>16.2</td>
</tr>
<tr>
<td>Not Employment</td>
<td>19%</td>
</tr>
</table>
</div>
Just wrap the tables and H4s in a div, and float them:
//css
.table-wrapper {
float: left;
width: 50%;
}
//html
<div class="table-wrapper">
<h4 id="tableTitle1">Graduates Status 2015</h4>
<table class="table1">
...
</table>
</div>
https://jsfiddle.net/jrp1f2dg/
You just need to wrap the html elements you want into span's, and then apply flex properties to them with css. See the codepen.
html:
<!--First Table-->
<span class="flex-wrapper">
<span class="flex-wrapper columns">
<h1 id="tableTitle1">Graduates Status 2015</h4>
<table class="table1">
<tr>
<th>Graduates</th>
<th>Status</th>
</tr>
<tr>
<td>5218</td>
<td>Available for Employment</td>
</tr>
<tr>
<td>936</td>
<td>Future Education</td>
</tr>
<tr>
<td>158</td>
<td>Not Seeking Employment</td>
</tr>
<tr>
<td>1866</td>
<td>Unable to Contact</td>
</tr>
</table>
</span>
<span class="flex-wrapper columns">
<!--Second Table-->
<h1 id="tableTitle1">Graduates Employment Rates</h4>
<table class="table2">
<tr>
<th>Graduates</th>
<th>Employment Rates (100%)</th>
</tr>
<tr>
<td>Employment Related (Full-time)</td>
<td>46.1%</td>
</tr>
<tr>
<td>Employment Related (Part-time)</td>
<td>8.3%</td>
</tr>
<tr>
<td>Employment Unrelated (Full-time)</td>
<td>19.8%</td>
</tr>
<tr>
<td>Employment Unrelated (Part-time)</td>
<td>16.2</td>
</tr>
<tr>
<td>Not Employment</td>
<td>19%</td>
</tr>
</table>
</span>
</span>
css:
.flex-wrapper {
display: flex
}
.columns {
flex-direction: column
}
.table1,
#tableTitle1 {
float: left;
display: inline-block;
}
.table2,
#tableTitle2 {
float: right;
display: inline-block;
}
.table1,
.table2 {
height: 230px;
display: inline-block;
text-align: center;
}
table,
td,
th {
border: 1px solid black;
padding: 5px;
border-spacing: 3px;
}
Here's what it will look like:
You have display:inline-table.It just makes table element to behave inline
I guess we can make use of it here
check this [link][1]
Hope this helps
You have typing mistake with second id, it could be tableTitle2 instead tableTitle1.
Then wrap each table with its <h4> in div and apply float for them:
<div class="left">
..your markup..
</div>
<div class="right">
..your markup..
</div>
.left {
float: left;
}
.right {
float: right;
}
Jsfiddle
If you want responsive tables, use percents for their widths:
div {
width: 50%;
}
.table1,
.table2 {
width: 100%;
}
Jsfiddle2
I commented all unused css
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.
I'm new to web development. I'm building a simple site using HTML and CSS. I have a page with 2 price lists made from tables. I have them both in one div and I want them on top of each other. There is a picture to the right of them. In firefox all is ok when I use absolute position, but in IE7 the picture pops up in between the two tables. I've tried floating right and left, positioning absolute and relative. Is it something to do with Quirks? I also changed the doctype to:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
This a bit of my code.
HTML:
<div id="price">
<table>
<tr>
<th>Cutting</th>
<th>Stylist</th>
<th>Senior Stylist</th>
</tr>
<tr>
<td>Men</td>
<td>£32</td>
<td>£35</td>
</tr>
<tr>
<td>Women</td>
<td>£36</td>
<td>£40</td>
</tr>
<tr>
<td>Restyle</td>
<td>£40</td>
<td>£45</td>
</tr>
<td colspan="3">student discount 10% Mon-Fri only</td>
</tr>
<tr>
<table>
<td>Half Head foils</td>
<td>From £55</td>
</tr>
<tr>
<td>Full Head foils</td>
<td>From £75</td>
</tr>
<tr>
<td>Colour between foils</td>
<td>From £15</td>
</tr>
</tr>
<tr>
<td>Organic Permanent colour</td>
<td>From £45</td>
</tr>
<tr>
<td>Semi-Permanent colour</td>
<td>From £40</td>
</tr>
<tr>
<td>Colour correction</td>
<td>By Quotation</td>
</tr>
</div>
<div id="pricepicture">
<img src="images/head.jpg" width="310" height="365" alt="picture of salon"/>
</div>
And CSS: (My last attempt using float)
#pricepicture {
float: right;
margin-right: 40px;
margin-top: 100px;
border: 1px solid #2c2e32;
height: 365px;
width: 310px;
}
#table {
float: left;
margin-left: 40px;
margin-top: 50px;
border-collapse: collapse;
}
#price {
float: left;
margin-left: -5px;
margin-top: 40px;
}
td {
text-align: left;
padding: 0.2em;
font-size: 1.3em;
}
th {
text-align: left;
padding: 0.2em;
font-size: 1.1em;
}
tr {
height: 20px;
}
I've been searching the Stack overflow Questions for days. Please help before I throw my laptop out of the window!
Thanks....
There are some HTML syntax errors. You must ensure that all tags are properly closed, and in the correct order. See the following.
<div id="price">
<table>
<tr>
<th>Cutting</th>
<th>Stylist</th>
<th>Senior Stylist</th>
</tr>
<tr>
<td>Men</td>
<td>£32</td>
<td>£35</td>
</tr>
<tr>
<td>Women</td>
<td>£36</td>
<td>£40</td>
</tr>
<tr>
<td>Restyle</td>
<td>£40</td>
<td>£45</td>
</tr>
<tr>
<td colspan="3">student discount 10% Mon-Fri only</td>
</tr>
</table>
<table>
<tr>
<td>Half Head foils</td>
<td>From £55</td>
</tr>
<tr>
<td>Full Head foils</td>
<td>From £75</td>
</tr>
<tr>
<td>Colour between foils</td>
<td>From £15</td>
</tr>
<tr>
<td>Organic Permanent colour</td>
<td>From £45</td>
</tr>
<tr>
<td>Semi-Permanent colour</td>
<td>From £40</td>
</tr>
<tr>
<td>Colour correction</td>
<td>By Quotation</td>
</tr>
</table>
</div>
<div id="pricepicture">
<img src="images/head.jpg" width="310" height="365" alt="picture of salon"/>
</div>