包含表头、表头、正文标签和表数据标签的 HTML 表答案

【问题标题】：HTML Table containing headers, table headers, body tag, and table data tag包含表头、表头、正文标签和表数据标签的 HTML 表
【发布时间】：2017-02-24 20:03:34
【问题描述】：

我正在尝试制作一个 2x2 表格，以便布局在一行上是“任务说明”和“图片 UMES”，然后是“2017”和第二行上的无序列表，但似乎无法弄清楚，它都显示为一个列表。

<!DOCTYPE html>
<html>

<head>
  <style type="text/css">
    h1 {
      background-color: gray;
      color: black;
      font-family: Verdana
    }
    
    h2 {
      color: gray;
      font-family: Verdana
    }
    
    h3 {
      font-family: Verdana
    }
    
    table {
      background-color: white
    }
    
    th {
      background-color: black;
      color: white;
      font-size: smaller
    }
    
    td {
      background-color: gray;
      font-size: smaller
    }
    
    body {
      font-family: Arial;
      color: black;
      background-color: white
    }
    
    address {
      font-family: "Courier New", monospace;
      font-size: larger
    }
  </style>
</head>

<body>
  <h1>University of Maryland Eastern Shore </h1>
  <table>
    <tr width="100%">
      <h2> UMES Mission Statement </h2>
      <th> Picture UMES </th>
    </tr>
    <tr>

      <body> 2017 </body>
      <td>
        <ul>
          <li> Picture of <a href="hawk_mascot.jpg"> our mascot </a> </li>
          <li> Picture of <a href="UMES_Campus.jpg"> our campus </a> </li>
        </ul>
      </td>
    </tr>
  </table>
</body>

</html>

【问题讨论】：

请在您的问题中发布您的代码。见minimal reproducible example
刚刚意识到我没有添加，抱歉，这里是新手
您的 HTML 在多个地方无效。首先尝试通过验证器运行它。例如：validator.w3.org/#validate_by_input
Matthew，这是定位方面的目标，但“MissionStatement”和“2017”应该是白色背景的，我之前尝试过，但它与背景混淆跨度>
Raj 有答案......你出错的地方是你应该只使用 th 和 td 作为 tr 的直接子代

标签： html html-table

【解决方案1】：

希望能达到你的要求

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<table border="1">
    <tr>
        <th>Mission Statement</th>
        <th>Picture UMES</th>
    </tr>
    <tr>
        <td>2017</td>
        <td>
        <ul>
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
        </ul>
        </td>

    </tr>
</table>

</body>
</html>

【讨论】：

虽然你是对的，但你应该解释 OP 出了什么问题以及你的代码做了什么来修复它。
我的回答说，如果你遵循这种格式，你可以达到你的要求
确实如此，但与提问者发布的内容相比，您应该解释为什么它有效。

【解决方案2】：

解决了... colspan="2" 你在找什么？

<!DOCTYPE html>
<html>

<head>
  <style type="text/css">
    h1 {
      background-color: gray;
      color: black;
      font-family: Verdana
    }
    
    h2 {
      color: gray;
      font-family: Verdana
    }
    
    h3 {
      font-family: Verdana
    }
    
    table {
      background-color: white
    }
    
    th {
      background-color: black;
      color: white;
      font-size: smaller
    }
    
    td {
      background-color: gray;
      font-size: smaller
    }
    
    body {
      font-family: Arial;
      color: black;
      background-color: white
    }
    
    address {
      font-family: "Courier New", monospace;
      font-size: larger
    }
  </style>
</head>

<body>
  <h1>University of Maryland Eastern Shore </h1>
  <table width="100%">
    <tr>
      <th><h2> UMES Mission Statement </h2></th>
      <th> Picture UMES </th>
    </tr>
    <tr>
      <td colspan="2">
        <body> 2017 </body>
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <ul>
          <li> Picture of <a href="hawk_mascot.jpg"> our mascot </a> </li>
          <li> Picture of <a href="UMES_Campus.jpg"> our campus </a> </li>
        </ul>
      </td>
    </tr>
  </table>
</body>

</html>

【讨论】：