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;
}
Related
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.
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've tried everything I can find so far in other stack overflow questions to solve this issue but can't get it figured out. I've got an HTML table with background images that I'm using to create rounded dividers/bubbles around specific items on a website. I can't get the table rows to completely go away though. And it seems like they are only to top and right that are showing a division? Both CSS and the table are shown below. Here's an image of what I can't get rid of. You can see the thin line right under the curves down then along the right side of the right border. It shows up other places too but the background is so close to the border color that it's not noticeable.
Also there is some redundant CSS in there I've just been trying everything I can find/think of in order to fix is.
I can't add images but here's a link with the image of the result I keep getting http://www.bdtransport.com/devel/TableIssue.JPG
Code:
table {
border-collapse: collapse;
border-spacing: 0;
border: none !important;
padding: 0 0 0 0;
margin: 0 auto;
}
tr, td {
padding: 0 0 0 0;
spacing: 0
border: none !important;
outline: none;
border-collapse: collapse;
}
<TABLE width='1100' align='center'>
<TR>
<TD colspan='5' background='./images/MainTop.jpg'> </TD>
</TR>
<TR>
<TD background='./images/MainLeft.jpg' width='75'> </TD>
<TD background='./images/MainNewsBackground.jpg' width='687'> Text </TD>
<TD background='./images/MainNewsDivider.jpg' width='22'> </TD>
<TD background='./images/MainNotificationsBackground.jpg' width='250'> Recent/Upcoming Info: </TD>
<TD background='./images/MainRight.jpg' width='66'> </TD>
</TR>
</table>
Please note that the following code snippet has been edited to include border="0" in the table opening. This should remove all borders.
<TABLE width='1100' align='center' border="0">
<TR>
<TD colspan='5' background='./images/MainTop.jpg'> </TD>
</TR>
<TR>
<TD background='./images/MainLeft.jpg' width='75'> </TD>
<TD background='./images/MainNewsBackground.jpg' width='687'> Text </TD>
<TD background='./images/MainNewsDivider.jpg' width='22'> </TD>
<TD background='./images/MainNotificationsBackground.jpg' width='250'> Recent/Upcoming Info: </TD>
<TD background='./images/MainRight.jpg' width='66'> </TD>
</TR>
</table>
If that did not remove all borders, you can try:
<TABLE width='1100' align='center' style="border:0">
<TR>
<TD colspan='5' background='./images/MainTop.jpg'> </TD>
</TR>
<TR>
<TD background='./images/MainLeft.jpg' width='75'> </TD>
<TD background='./images/MainNewsBackground.jpg' width='687'> Text </TD>
<TD background='./images/MainNewsDivider.jpg' width='22'> </TD>
<TD background='./images/MainNotificationsBackground.jpg' width='250'> Recent/Upcoming Info: </TD>
<TD background='./images/MainRight.jpg' width='66'> </TD>
</TR>
</table>
That should remove the border. With this method, there is also no need for overly complicated CSS code in your page.
<table class="project-table">
<thead>
<tr class="align-top">
<td class="short-col heading">Project Name</td>
<td class="short-col heading align-center">Project Id</td>
<td class="short-col heading">Date & Time</td>
<td class="short-col heading">Student</td>
</tr>
</thead>
<tbody>
<tr class="bottom-row-dashed">
<td class="long-col">
<div class="achievement-box float-left">Winner</div>
<div class="float-left margin-left">Intrusion Detection System in Cloud Architecture</div>
<div class="clear"></div>
</td>
<td class="short-col align-center">1</td>
<td class="short-col">01 Apr 2014, 09:30 PM</td>
<td class="short-col">Sayan Chowdhury</td>
</tr>
<tr>
</tr></tbody>
</table>
The stylus file:
table.project-table
font-size: 13px
margin-top: 10px
width: 100%
border-collapse: collapse
.bottom-row-dashed
border-bottom: 1px dashed border-color
.margin-right
margin-right: 2px
.margin-left
margin-left: 2px
td
&.short-col
width: 1%
&.large-col
width: 20%
&.medium-col
width: 10%
tr
&.align-top
vertical-align: top
The div that contains "Winner" and "Intrusion Detection System in Cloud Architecture" are float left. I added word-wrap:break-word; but it did not help breaking the breaking the term "Intrusion Detection System in Cloud Architecture". The short-col and long-col class defines the width of the table column
How can I break the term "Intrusion Detection System in Cloud Architecture" based on the width.?
EDIT: I want to have "Intrusion Detection System in Cloud Architecture" and "Winner" on the same line but as the word should break off in the middle based on the width
Check out the Demo
I just added a break tag
<div class="float-left margin-left">Intrusion Detection<br> System in Cloud Architecture</div>
Output fiddle
Another way
Another way of Doing it
Setting of max width does the trick
th{
padding-left:30px;
}
td{
padding-left:30px;
max-width: 200px; /*or whatever*/
word-wrap: break-word;
}
th:first-child{
padding-left:0px;
}
td:first-child{
padding-left:0px;
}
Output using word wrap and max-width
Check this out latest
display:inline;
Give some width to the first td of first row like:
Check the demo:FIDDLE
<table class="project-table">
<thead>
<tr calss="align-top">
<td class="short-col heading" width="200px">Project Name</td>
<td class="short-col heading align-center">Project Id</td>
<td class="short-col heading">Date & Time</td>
<td class="short-col heading">Student</td>
</tr>
</thead>
<tbody>
<tr class="bottom-row-dashed">
<td class="long-col" >
<div class="achievement-box float-left">Winner</div>
<div class="float-left margin-left">Intrusion Detection System in Cloud Architecture</div>
<div class="clear"></div>
</td>
<td class="short-col align-center">1</td>
<td class="short-col">01 Apr 2014, 09:30 PM</td>
<td class="short-col">Sayan Chowdhury</td>
</tr>
<tr>
</tr></tbody>
</table>
I have a fair bit of experience coding emails and am familiar with the nightmare that is Outlook but this is a new one for me and, what's more, it only seems to be affecting some users. Basically, in our newsletter templates there is a table designed to nest the content in. It has columns on the left and right with width attributes to act as margins. For some users of 2010, Outlook seems to collapse the columns, for others it doesn't.
Is anyone aware of a setting in Outlook that might cause this to happen?
Here's a version of the code, with the contents stripped out:
<table style="FONT-FAMILY: Helvetica Neue, Arial, sans-serif; COLOR: #4b4b4b; FONT-SIZE: 12px" border="0" cellspacing="0" cellpadding="0" width="600" bgcolor="#FFFFFF" align="center">
<tbody>
<tr>
<td rowspan="6" width="30"></td>
<td height="30"></td>
<td rowspan="6" width="30"></td>
</tr>
<tr>
<td style="PADDING-BOTTOM: 40px">
<table style="WIDTH: 540px">
<tbody>
<tr>
<td style="TEXT-ALIGN: right; PADDING-BOTTOM: 10px; FONT-SIZE: 10px"></td>
</tr>
</tbody>
</table>
<table style="WIDTH: 540px" border="0" cellspacing="0">
<tbody>
<tr>
<td width="340"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="PADDING-BOTTOM: 20px"></td>
</tr>
<tr>
<td style="PADDING-BOTTOM: 45px; FONT-SIZE: 10px; BORDER-TOP: #412878 4px solid; PADDING-TOP: 20px">
</td>
</tr>
</tbody>
</table>
Thanks,
M
My advice would be to look at Campaign Monitors CSS support list for email clients; positional CSS such as margin, padding etc. are completely ignored by Outlook '10. Stay as far away as possible from CSS when using Outlook '10, code like its the early 90's and use height attributes and extra elements if needed.
http://www.campaignmonitor.com/css/