How do I format table headers with a specific design?

Question

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:

This is not a real question, you are basically asking us to make this design for you. — Enmanuel Duran, Sep 05 '16 at 04:03
I clearly stated I don't know how to make the design. I'm not asking someone to do it for me, I'm asking how do I do it. Like an explanation of what I should do to make it look like that. Do I need to make the header into a separate block and change the background color and add padding or something? And for the icons I'm not sure why they didn't show up as the triangles. Literally have everything done except the designs of the header and you are telling me I'm asking you to design this for me?? — ChaCol, Sep 05 '16 at 04:08
I guess a better specific question would be: How do I add a white padding/border around the header of my table to make the white space behind the background and how do I add the line underneath that? Would it just be and another border under the header? — ChaCol, Sep 05 '16 at 04:11
is it completly necessary that you have to use a table for everything? I Need to know this to help you. — Enmanuel Duran, Sep 05 '16 at 04:16
No it's not necessary, I was just using that because I thought that was what would work best. I just started learning HTML and was just using the things I've learned so far, so if there is a better way I am willing to try it. — ChaCol, Sep 05 '16 at 04:18

score 2 · Accepted Answer · edited Sep 05 '16 at 11:37

Line break is defined as   not 
 doesn't need to be inside  because you can write your text in  directly & it will show up.
You don't need to write   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.

I was using
to create the white space between the tables so they aren't touching each other, is this not what you are suppose to do? — ChaCol, Sep 05 '16 at 04:47
Nope, You were using ` which is not even a tag that exists. there are many ways to get that white space. Margins/Padding. Controlling Top/Bot/R/L space after setting display type. use `
` only in text. Test my code above to see the result. the code had 17 errors. — Ahmed I. Elsayed, Sep 05 '16 at 04:50
Oh I didn't realize you were talking about the one in the table. Yeah I didn't know how to get it to go to the next line for the formatting that I wanted. But I used
between the tables so there was a white space so they aren't touching. — ChaCol, Sep 05 '16 at 04:54
Text only, Tables won't be affected with it, use margins/padding/display instead — Ahmed I. Elsayed, Sep 05 '16 at 04:56

Dita Aji Pratama · Answer 2 · 2016-09-05T05:07:32.483

1

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.

edited Sep 05 '16 at 05:07

answered Sep 05 '16 at 04:33

Dita Aji Pratama

710
1
12
28

I wanted to use a sideways triangle and I thought we could use the unicode for it? – ChaCol Sep 05 '16 at 04:44
@ChaCol Hmm... Maybe try this again, `ul { list-style: none; padding: 0px; } ul li:before { content: '►'; margin: 0 1em; } ` Hope this will help you – Dita Aji Pratama Sep 05 '16 at 04:59
Nope all that did was was show: â–º maybe this version of IE doesn't support that symbol. Actually I just tried it in w3schools and it worked, however when I use it from my notepad it doesn't work. – ChaCol Sep 05 '16 at 05:10
@ChaCol Many web design not support on IE. how about on Mozilla firefox? Is that work? By the way, you can use `
` to make a line, like your resume, and if you want to make `
` or `
` with `/` , use `/` on right side, like this `
`, not like this ``. Keep up the good work. – Dita Aji Pratama Sep 05 '16 at 05:22
I figured it out, I had to add to my code. Now how do I make this style apply only to one table and not all the tables? Right now it is showing my bottom table with a disc bullet point and the triangle instead of just the disc. – ChaCol Sep 05 '16 at 05:32

How do I format table headers with a specific design?

2 Answers2