Question 331262 in Html Question posted in
Some basic documentation can be found here.

HTML, two sizes of font in one table cell

<tr>
<th>ID</th><th>Station Name</th><th>Datum<br> <span style='font-size:3px'>(mAOD)</span> </th><th>Latest Level<br> <font size="1">(% of normal range)</font> </th><th>Recorded at</th><th></th>
</tr>

In the line above both the span and font tags are having no effect on the text size.

Here is the complete page for reference:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
  <title>River Levels</title>
  <style>
    body {
      background-color: #000000;
      COLOR: #ffff00;
      font: normal 15px Verdana, Arial, sans-serif;
    }
    
    a:link,
    a:visited {
      color: #00ff00;
    }
    
    a:hover {
      color: #009900;
      text-decoration: underline;
    }
    
    h1 {
      color: #ffff00;
    }
    
    p {
      color: #ffff00;
      margin-right: 15%;
      margin-left: 15%;
      border: 1px solid red;
      padding: 30px;
    }
    
    table,
    th,
    td {
      border: 1px solid red;
      border-collapse: collapse;
      text-align: center;
      padding: 15px;
    }
  </style>
</head>

<body>
  <center>

    <img alt="Nene (76K)" src="RiverLevels2.png" /><br>&nbsp;<br />


    <table>
      <tr>
        <th>ID</th>
        <th>Station Name</th>
        <th>Datum<br> <span style='font-size:3px'>(mAOD)</span> </th>
        <th>Latest Level<br>
          <font size="1">(% of normal range)</font>
        </th>
        <th>Recorded at</th>
        <th></th>
      </tr>
      <tr>
        <td>6286</td>
        <td>Orton Sluice</td>
        <td>2</td>
        <td>15</td>
        <td>01:45 Wed 31</td>
        <td bgcolor="#7f00ff">&nbsp;&nbsp;&nbsp;&nbsp;</td>
      </tr>
      <tr>
        <td>6107</td>
        <td>Wansford</td>
        <td>8.03</td>
        <td>11</td>
        <td>01:45 Wed 31</td>
        <td bgcolor="#593bfd">&nbsp;&nbsp;&nbsp;&nbsp;</td>
      </tr>
      <tr>
        <td>6111</td>
        <td>Lilford</td>
        <td>21.8</td>
        <td>17</td>
        <td>20:45 Tue 30</td>
        <td bgcolor="#03b0ec">&nbsp;&nbsp;&nbsp;&nbsp;</td>
      </tr>
      <tr>
        <td>6104</td>
        <td>Harrowden</td>
        <td>45.4</td>
        <td>18</td>
        <td>06:00 Tue 30</td>
        <td bgcolor="#92fda9">&nbsp;&nbsp;&nbsp;&nbsp;</td>
      </tr>
      <tr>
        <td>9396</td>
        <td>Brigstock</td>
        <td>52.05</td>
        <td>9</td>
        <td>01:45 Wed 31</td>
        <td bgcolor="#bced8f">&nbsp;&nbsp;&nbsp;&nbsp;</td>
      </tr>
      <tr>
        <td>6108</td>
        <td>South Bridge</td>
        <td>56.0</td>
        <td>0</td>
        <td>01:45 Wed 31</td>
        <td bgcolor="#d4dc7f">&nbsp;&nbsp;&nbsp;&nbsp;</td>
      </tr>
      <tr>
        <td>6103</td>
        <td>Wootton Park</td>
        <td>62.0</td>
        <td>10</td>
        <td>06:00 Tue 30</td>
        <td bgcolor="#fab964">&nbsp;&nbsp;&nbsp;&nbsp;</td>
      </tr>
      <tr>
        <td>6120</td>
        <td>Kislingbury</td>
        <td>63.84</td>
        <td>12</td>
        <td>01:45 Wed 31</td>
        <td bgcolor="#ffab5c">&nbsp;&nbsp;&nbsp;&nbsp;</td>
      </tr>
      <tr>
        <td>6101</td>
        <td>Dodford</td>
        <td>79.2</td>
        <td>14</td>
        <td>18:00 Tue 30</td>
        <td bgcolor="#ff2512">&nbsp;&nbsp;&nbsp;&nbsp;</td>
      </tr>
      <tr>
        <td>6218</td>
        <td>Brixworth</td>
        <td>82.5</td>
        <td>9</td>
        <td>06:30 Tue 30</td>
        <td bgcolor="#ff0301">&nbsp;&nbsp;&nbsp;&nbsp;</td>
      </tr>
    </table><br />

  </center>

  <p>
    Levels are scaled so that the normal range fits between the 2 green lines. Levels higher than 100% indicate that flooding is possible. Levels below zero may indicate a malfunctioning lock or sluice.
    <br />&nbsp;<br /> Line colours are derived from the site datum, blue is for sites close to sea level and red is higher up the river, lines with the same colour are from sites at the same level.
    <br />&nbsp;<br /> Data from here: <a href="https://flood-warning-information.service.gov.uk/river-and-sea-levels">
         https://flood-warning-information.service.gov.uk/river-and-sea-levels</a>. Data is updated by the Environment Agency daily, more often in times of flood.
    <br />&nbsp;<br /> Contains public sector information licensed under the <a href="http://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/">Open Government Licence v3.0.</a>
  </p>


  <center>
    <table>
      <tr>
        <th>Station Name</th>
        <th>Rainfall<br>
          <font size="-3"> (24 hours)</font>
        </th>
        <th>Recorded</th>
      </tr>
      <tr>
        <tr>
          <td>Dog In A Doublet </td>
          <td>0.0mm</td>
          <td>4:45am on 28 January</td>
        </tr>
        <tr>
          <td>Chesterton </td>
          <td>0.0mm</td>
          <td>5:15am on 28 January</td>
        </tr>
        <tr>
          <td>Metoff Wittering </td>
          <td>0.0mm</td>
          <td>5:00am on 28 January</td>
        </tr>
        <tr>
          <td>Kings Cliffe </td>
          <td>0.0mm</td>
          <td>6:30am on 27 January</td>
        </tr>
        <tr>
          <td>Oundle </td>
          <td>0.0mm</td>
          <td>4:30am on 28 January</td>
        </tr>
        <tr>
          <td>Brigstock </td>
          <td>0.2mm</td>
          <td>4:30am on 28 January</td>
        </tr>
        <tr>
          <td>Wellingborough </td>
          <td>0.8mm</td>
          <td>4:30am on 28 January</td>
        </tr>
        <tr>
          <td>Yardley Hastings </td>
          <td>0.0mm</td>
          <td>6:30am on 27 January</td>
        </tr>
        <tr>
          <td>Quinton </td>
          <td>0.0mm</td>
          <td>5:15am on 28 January</td>
        </tr>
        <tr>
          <td>Pitsford </td>
          <td>0.0mm</td>
          <td>5:45am on 28 January</td>
        </tr>
        <tr>
          <td>Dodford </td>
          <td>0.0mm</td>
          <td>6:30am on 27 January</td>
        </tr>
    </table>
  </center>
  <p>Rainfall data updated at 06:10GMT, Sun 28 January <br>
    <a href="https://environment.data.gov.uk/catchment-planning/ManagementCatchment/3059"> <br> Nene catchment map</a>
  </p>
</body>

</html>

I am expecting the tagged text to be smaller.

I have also tried "small" and defining a div.

Tags:

2

Answers


  1. 0

    It seems to be working correctly, assuming that your problem is that you want the text in table header row “Latest Level (% of normal range)” to have different size, where the text “Latest Level” is bigger than the text in parentheses.enter image description here

    Login or Signup to reply.
  2. 0

    your code is working for me and both tags have a small font but i added two class and created a snippet for you. .small and .smaller, I hope I understood your problem correctly

    body {
    background-color: #000000;
        COLOR: #ffff00;     
        font: normal 15px Verdana, Arial, sans-serif;   
        
} 

  a:link,a:visited {
   color: #00ff00;
  }
  a:hover {
   color: #009900;
   text-decoration: underline;
  }

h1 {color: #ffff00;}

p  {color: #ffff00;
     margin-right: 15%; 
     margin-left: 15%; 
   border: 1px solid red;
     padding: 30px;
}

table, th, td {
    border: 1px solid red;
         border-collapse: collapse;
         text-align: center;
         padding: 15px;
}
.small{
font-size:8px;
}
.smaller{
font-size:4px
}
    <table>
<tr>
<th>ID</th>
<th>Station Name</th>
<th>Datum<br> <span class="smaller">(mAOD)</span> </th>
<th>Latest Level<br> <font class="small">(% of normal range)</font> </th>
<th>Recorded at</th>
<th></th>
</tr>
<tr>
<td>6286</td>
<td>Orton Sluice</td>
<td>2</td>
<td>15</td>
<td>01:45 Wed 31</td>
<td bgcolor="#7f00ff">&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search