CODEWITHSUNDEEP
htmlcsshtml-table
Meg Learmonth
Meg Learmonth

Reputation: 11

How to stye <THEAD> tag in HTML (with css):

I'm currently making a HTML table (it's a work in progress and still needs a lot more CSS to make it look pretty) and I can't seem to style the <THEAD> so it stretches across the entire table instead of only the left - as shown in the attached photo. I've tried multiple ways but none seem to work, I would be very grateful if anyone could help.

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>

Upvotes: 1

Views: 243

Answers (2)

Quentin
Quentin

Reputation: 944083

This isn't something you can fix with styling.

To make a table heading cell span multiple columns, you have to set the colspan attribute to be equal to the total number of columns. You have more than 2 columns, so 2 won't do the job.

You don't have table heading cell data though. The th element is for putting a heading on a column (or set of columns), not a whole table.

That is what caption is for.

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%
}
<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>

Upvotes: 0

j08691
j08691

Reputation: 207943

Change:

<TH COLSPAN="2">

to :

<TH COLSPAN="6">

You told the table head row to only span two columns when you want it to span all six.

Note: as danfromgermany noted, be sure to fix your quotes to use ", not “. Also note that <th> elements can't contain <h3> elements. You should run your code through a HTML validator to catch such errors.

Upvotes: 2

Related Questions