html - 如何使用特定设计格式化表格标题？

标签 html css html-table

我正在做一项作业，我们必须创建一个格式类似于简历图片的网站。图片在这里:link

我的大部分格式都是正确的，但有一些事情我无法弄清楚。首先，如何创建与图中类似的表头样式？ 另外，如何将名称和图片区域做成一个 block 并添加这两个边框？

哦，为什么我的列表图标变成了汉字，我复制了横向三 Angular 形的代码，但结果是这样的。而且这些代码也不适用于电话/电子邮件，因此我最终使用了它们的图片。

<!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;">: <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bfcddedcd7dad3d8decdd1dacdffd8d2ded6d391dcd0d2" rel="noreferrer noopener nofollow">[email protected]</a></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 now

最佳答案

  • 换行符定义为<br>不是</br>
  • <span>不需要在里面<p>因为您可以在 <span> 中写入文本直接＆它会显示。
  • 您不需要写<br>在所有内容之间，只需键入空格，HTML 就会忽略它们。这不是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;">: <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81f3e0e2e9e4ede6e0f3efe4f3c1e6ece0e8edafe2eeec" rel="noreferrer noopener nofollow">[email protected]</a></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>

已修复所有错误。

关于html - 如何使用特定设计格式化表格标题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39323698/

上一篇：html - 绝对定位的过渡

下一篇：javascript - 打印 div 有效，但在 jQuery 顶部有空格

相关文章：

html - 如何根据 API 的响应在 Bootstrap 表中动态添加一行？

php - 屏幕宽度不准确。如果删除滚动条，则变得准确

html - 如何在没有表格的情况下设计和对齐表格？

html - 将 HTML 表导出到 MySQL

javascript - 如何根据列值在每行上显示复选框 - JQuery DataTable

html - 使用 bootstrap 3 将 div 中的文本对齐到底部

html - 如何使电子邮件模板中的 Logo 在所有电子邮件客户端上看起来都相同

css - 将 CSS 旋转文本定位到图像左侧？

javascript - 插入输入日期后我没有得到输出

html - 使用CSS悬停后Div正在滑动

©2024 IT工具网  联系我们