ChaCol ChaCol - 2 months ago 5
CSS Question

How do I format table headers with a specific design?

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 what my website looks like now

Answer
  • 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!

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

    #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;
    }
</style>

<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.

Comments