如何在HTML中标记标记（使用css）：

时间：2016-06-30 15:17:13

标签： html css html-table

我目前正在制作一个HTML表格（这是一项正在进行中的工作，仍然需要更多CSS才能让它看起来很漂亮）而且我似乎无法设计<THEAD>的样式，所以它横跨整个桌子而不是仅在左侧延伸 - 如附图中所示。我尝试了多种方法，但似乎没有任何方法，如果有人能提供帮助，我将非常感激。

Current Table

    

<head>
  <title>League of Legends EU LCS Standings</title>
</head>

<body>

  <TABLE WIDTH="50%" BORDER="5"  CELLPADDING="4" CELLSPACING="3">

<THEAD>

    <TR>
      <TH COLSPAN="2">
        <BR>
        <H3>LoL EU LCS Table Standings</H3> </TH>
    </TR>
</THEAD>

<TBODY>

      <TR>
        <TH>Position</TH>
        <TH>Team</TH>
        <TH>Wins</TH>
        <TH>Draws</TH>
        <TH>Losses</TH>
        <TH>Points</TH>

      </TR>

    <TR ALIGN="CENTER">
      <TD>1</TD>
      <TD><A HREF=“http://www.fnatic.com”>Fnatic</A></TD>
      <TD>5</TD>
      <TD>2</TD>
      <TD>1</TD>
      <TD>17</TD>
    </TR>

    </TR>
    <TR ALIGN="CENTER">
      <TD>2</TD>
      <TD><A HREF=“http://www.g2esports.com”>G2 ESports</A></TD>
      <TD>4</TD>
      <TD>4</TD>
      <TD>0</TD>
      <TD>16</TD>
    </TR>

    </TR>
    <TR ALIGN="CENTER">
      <TD>3</TD>
      <TD><A HREF=“http://www.h2k-gaming.eu”>H2K</A></TD>
      <TD>3</TD>
      <TD>4</TD>
      <TD>1</TD>
      <TD>13</TD>
    </TR>

    </TR>
    <TR ALIGN="CENTER">
      <TD>4</TD>
      <TD><A HREF=“http://www.schalke04.de/en/”>FC Schalke 04</A></TD>
      <TD>3</TD>
      <TD>3</TD>
      <TD>2</TD>
      <TD>12</TD>
    </TR>

    </TR>
    <TR ALIGN="CENTER">
      <TD>5</TD>
      <TD><A HREF=“https://www.splyce.gg”>Splyce</A></TD>
      <TD>2</TD>
      <TD>4</TD>
      <TD>2</TD>
      <TD>10</TD>
    </TR>

    </TR>
    <TR ALIGN="CENTER">
      <TD>6</TD>
      <TD><A HREF=“http://www.team-vitality.fr”>Team Vitality</A></TD>
      <TD>1</TD>
      <TD>5</TD>
      <TD>2</TD>
      <TD>8</TD>
    </TR>

    </TR>
    <TR ALIGN="CENTER">
      <TD>7</TD>
      <TD><A HREF=”http://www.giantsgaming.pro/en/home”>Giants</A></TD>
      <TD>2</TD>
      <TD>1</TD>
      <TD>5</TD>
      <TD>7</TD>
    </TR>

    </TR>
    <TR ALIGN="CENTER">
      <TD>7</TD>
      <TD><A HREF=“http://www.unicornsoflove.eu”>Unicorns of Love</A></TD>
      <TD>2</TD>
      <TD>1</TD>
      <TD>5</TD>
      <TD>7</TD>
    </TR>

    </TR>
    <TR ALIGN="CENTER">
      <TD>9</TD>
      <TD><A HREF=“http://www.roccat.org/en-GB/Home/Overview/”>Roccat</A></TD>
      <TD>1</TD>
      <TD>4</TD>
      <TD>3</TD>
      <TD>7</TD>
    </TR>

    </TR>
    <TR ALIGN="CENTER">
      <TD>9</TD>
      <TD><A HREF=“https://www.origen.gg”>Origen</A></TD>
      <TD>1</TD>
      <TD>4</TD>
      <TD>3</TD>
      <TD>7</TD>
    </TR>

</TBODY>

  </TABLE>

  <style>
    td, th {
    border: 1px solid #999;
    padding: 0.3em;


    }

th {
background-color:#808080;
color: white;
}

th, tr {
font-size: 24px;
font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
}


tr:hover {background-color: #f5f5f5}



table{
border: 1px solid black;
width: 100%;
}


  </style>

</body>

</html>

2 个答案:

答案 0 :(得分：2)

变化：

<TH COLSPAN="2">

到：

<TH COLSPAN="6">

当你希望它跨越所有六个时，你告诉桌面行只能跨越两列。

注意：正如danfromgermany所说，请务必修改引号以使用"，而不是“。另请注意，<th>元素不能包含<h3>个元素。您应该通过HTML验证程序运行代码以捕获此类错误。

答案 1 :(得分：0)

这不是你可以用造型修复的东西。

要使表格标题单元格跨越多列，您必须将colspan属性设置为等于列总数。您的列数超过2，因此2无法完成此任务。

但是，您没有表标题单元格数据。 th元素用于在列（或列集）上放置标题，而不是整个表。

这就是caption的用途。

＆＃13;
＆＃13; 
td,
th,
caption {
  border: 1px solid black;
  padding: .3em font-weight: bold;
  font-size: 125%;
}
caption {
  background-color: gray;
  color: #fff
}
th,
tr {
  font-size: 24px;
  font-family: Futura, 'Trebuchet MS', Arial, sans-serif
}
tr:hover {
  background-color: #f5f5f5
}
table {
  border: 1px solid #000;
  width: 100%
}
＆＃13; 
<table width="50%" border="5" cellpadding="4" cellspacing="3">
  <caption>LoL EU LCS Table Standings</caption>
  <tbody>
    <tr>
      <th>
        Position
      </th>
      <th>
        Team
      </th>
      <th>
        Wins
      </th>
      <th>
        Draws
      </th>
      <th>
        Losses
      </th>
      <th>
        Points
      </th>
    </tr>
    <tr align="center">
      <td>
        1
      </td>
      <td>
        <a href="%E2%80%9Chttp://www.fnatic.com%E2%80%9D">Fnatic</a>
      </td>
      <td>
        5
      </td>
      <td>
        2
      </td>
      <td>
        1
      </td>
      <td>
        17
      </td>
    </tr>
    <tr align="center">
      <td>
        2
      </td>
      <td>
        <a href="%E2%80%9Chttp://www.g2esports.com%E2%80%9D">G2 ESports</a>
      </td>
      <td>
        4
      </td>
      <td>
        4
      </td>
      <td>
        0
      </td>
      <td>
        16
      </td>
    </tr>
    <tr align="center">
      <td>
        3
      </td>
      <td>
        <a href="%E2%80%9Chttp://www.h2k-gaming.eu%E2%80%9D">H2K</a>
      </td>
      <td>
        3
      </td>
      <td>
        4
      </td>
      <td>
        1
      </td>
      <td>
        13
      </td>
    </tr>
    <tr align="center">
      <td>
        4
      </td>
      <td>
        <a href="%E2%80%9Chttp://www.schalke04.de/en/%E2%80%9D">FC Schalke 04</a>
      </td>
      <td>
        3
      </td>
      <td>
        3
      </td>
      <td>
        2
      </td>
      <td>
        12
      </td>
    </tr>
    <tr align="center">
      <td>
        5
      </td>
      <td>
        <a href="%E2%80%9Chttps://www.splyce.gg%E2%80%9D">Splyce</a>
      </td>
      <td>
        2
      </td>
      <td>
        4
      </td>
      <td>
        2
      </td>
      <td>
        10
      </td>
    </tr>
    <tr align="center">
      <td>
        6
      </td>
      <td>
        <a href="%E2%80%9Chttp://www.team-vitality.fr%E2%80%9D">Team Vitality</a>
      </td>
      <td>
        1
      </td>
      <td>
        5
      </td>
      <td>
        2
      </td>
      <td>
        8
      </td>
    </tr>
    <tr align="center">
      <td>
        7
      </td>
      <td>
        <a href="%E2%80%9Dhttp://www.giantsgaming.pro/en/home%E2%80%9D">Giants</a>
      </td>
      <td>
        2
      </td>
      <td>
        1
      </td>
      <td>
        5
      </td>
      <td>
        7
      </td>
    </tr>
    <tr align="center">
      <td>
        7
      </td>
      <td>
        <a href="%E2%80%9Chttp://www.unicornsoflove.eu%E2%80%9D">Unicorns of Love</a>
      </td>
      <td>
        2
      </td>
      <td>
        1
      </td>
      <td>
        5
      </td>
      <td>
        7
      </td>
    </tr>
    <tr align="center">
      <td>
        9
      </td>
      <td>
        <a href="%E2%80%9Chttp://www.roccat.org/en-GB/Home/Overview/%E2%80%9D">Roccat</a>
      </td>
      <td>
        1
      </td>
      <td>
        4
      </td>
      <td>
        3
      </td>
      <td>
        7
      </td>
    </tr>
    <tr align="center">
      <td>
        9
      </td>
      <td>
        <a href="%E2%80%9Chttps://www.origen.gg%E2%80%9D">Origen</a>
      </td>
      <td>
        1
      </td>
      <td>
        4
      </td>
      <td>
        3
      </td>
      <td>
        7
      </td>
    </tr>
  </tbody>
</table>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题