#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2005
    Location
    uk
    Posts
    112
    Rep Power
    13

    How do I change font size for one <td> cell?


    I have made a html document.

    At the top, there is a style which says:
    Code:
    body,td,th {
    	font-family: Verdana;
    	font-size: 15px;
    	color: #4D4D4D;
    	line-height:normal;
    }
    Notice that it applied to <td> also.

    So now, I have one particular <td> in a <table> for which I want to change the font size.
    How do I do this?

    Appreciate the help,

    JH
    Last edited by Jetheat; July 5th, 2017 at 10:09 AM.
  2. #2
  3. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    357
    Rep Power
    132
    Hi there Jetheat,

    here is one possible solution...

    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>untitled document</title>
    
    <link rel="stylesheet" href="screen.css" media="screen">
    
    <style media="screen">
    body {
        font: 1em/1.62em verdana, arial, helvetica, sans-serif;
      }
    th, td {
        color: #4d4d4d;
     }
    tr:nth-of-type(3) td:nth-of-type(2){
        border: 0.062em solid #4d4d4d;
        font-size: 1.5em; 
        text-align: center;
     }
    </style>
    
    </head>
    <body> 
    
     <table>
      <tr>
       <th>header</th>
       <th>header</th>
       <th>header</th>
      </tr><tr>
       <td>cell</td>
       <td>cell</td>
       <td>cell</td>
      </tr><tr>
       <td>cell</td>
       <td>cell</td>
       <td>cell</td>
      </tr><tr>
       <td>cell</td>
       <td>cell</td>
       <td>cell</td>
      </tr>
     </table>
    
    </body>
    </html>

    coothead
    ~ the original bald headed old fart ~
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2005
    Location
    uk
    Posts
    112
    Rep Power
    13
    Thanks for that answer. I'm just a beginner in CSS. I don't realy understand nth and classes and IDs.

    But I did use an ID and it still doesnt work.

    On the top, I have:


    #intro {
    font-family: Verdana;
    font-size: 7px;
    color: #4D4D4D;
    }

    And within the <td> cell, I created a <div> like this:
    <div id="intro">

    It still didn't change the text size.

    Any ideas?

    JH
  6. #4
  7. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    357
    Rep Power
    132
    Hi there Jetheat,

    are you using the "table element" to display tabular data?

    If not, then you should be using the correct semantic
    elements for the document.

    coothead
    ~ the original bald headed old fart ~
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2005
    Location
    uk
    Posts
    112
    Rep Power
    13
    Originally Posted by coothead
    Hi there Jetheat,

    are you using the "table element" to display tabular data?

    If not, then you should be using the correct semantic
    elements for the document.

    coothead
    Yes, this is my code:

    <table>
    <tr>
    <td width="27%" >

    <div id="intro">
    <h5>What's On This Page?</h5>

    <p><strong>What:</strong>
    </p>
    <p><strong>Why:</strong> Escape from the usual boring stuff
    </p>
    <p><strong>Benefit:</strong> What you will receive by becoming a Contract Manager
    </p>
    <p><strong>Guarantee</strong>: How this offer is risk-free!
    </p>
    <p>← Watch this video for an overview of dealing in contracts...
    </p>

    </div>

    </td>
    </tr>
    </table>


    At the top of the page, I have:


    intro {
    font-family: Verdana;
    color: #4D4D4D;
    font-size: 10px;
    }
  10. #6
  11. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    357
    Rep Power
    132
    Hi there Jetheat,

    your code does not have any "tabular data", so
    you have no need to use the "table element".

    How does this look, for starters...

    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>untitled document</title>
    
    <link rel="stylesheet" href="screen.css" media="screen">
    
    <style media="screen">
    body {
        background-color: #f0f0f0;
    	font: 1em/1.62em verdana, arial, helvetica, sans-serif;
      }
    
    #container {
        width: 98%;
        max-width: 30em;
        padding: 2em;
        margin: auto;
        border: 0.06em solid #999;
        border-radius: 0.5em;
        box-sizing: border-box;
        box-shadow: 0.4em 0.4em 0.4em #999;
        background-color: #fff;
        color: #666;    
     }
    
    h1{
        font-size: 1.25em;
        text-align: center;
     }
    
    #container span{ 
        display: inline-block;
        margin-right: 0.5em;
        font-weight: bold;
     }
    </style>
    
    </head>
    <body> 
    
     <div id="container">
    
      <h1>What's On This Page?</h1>
    
      <span>What:</span>
      <p><span>Why:</span>Escape from the usual boring stuff</p>
      <p><span>Benefit:</span>What you will receive by becoming a Contract Manager</p>
      <p><span>Guarantee:</span>How this offer is risk-free!</p>
      <p>Watch this video for an overview of dealing in contracts...</p>
    
     </div>
    
    </body>
    </html>

    coothead

    Comments on this post

    • Kravvitz agrees
    ~ the original bald headed old fart ~

IMN logo majestic logo threadwatch logo seochat tools logo