SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    make table2-1 inherit table2

    make table2-1 inherit from table2

    Code:
    <!doctype html>
    <html> 
    <head>
    <meta charset="UTF-8">
    <title>style test</title>
     <style type="text/css"> 
    * {  font-size:15px;}
    </style>
    </head>
    <body >body 
    
    <table>
      <tr>
        <td>
            table1
          <table> 
            <tr>
             <td>table1-1 </td>
           </tr>
          </table>
    
    </td>
    </tr>
    </table>
    
    <table>
      <tr>
        <td style="font-size:30px">table2
    
          <table> 
            <tr>
              <td style="font-size:30px">table2-1</td>
            </tr>
          </table>
    
        </td>
      </tr>
    </table>
    
    </body>
    </html>
    I have 4 tables, table1, table1-1 and table2 and table2-2 in the code above.
    The font-size of the table1 and table1-1 is 15 px which is defined by the code "* { font-size:15px;}".
    The font-size of the table2 and table2-1 is 30 px which is defined by the code "style="font-size:30px" in the each <td> cell.

    Let's suppose I have many tables which are nested by table2 and I like to make/change the font-size of the all tables which are nested by table2 "30px".
    Should I put the code "style="font-size:30px" to the all tables which are nested by table2 like the code above?

    Is there anyway to make all the text in table2 font-size:30px without putting the code "style="font-size:30px" to the all tables which are nested by table2 with simply changing the font-size of table2(mother table) only?


    In the case of table1,
    I can change all text to font-size:20px in the tables which are nested table1 by changing the code "* { font-size:15px;}". to "* { font-size:20px;}".

  2. #2
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    311
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can give id's to main tables (1 and 2) and style them accordingly. Something like the below code:

    Code:
    <!doctype html>
    <html> 
    <head>
    <meta charset="UTF-8">
    <title>style test</title>
     <style type="text/css"> 
    	#table1 {
    		 font-size:15px;
    	}
    	#table2 {
    		 font-size:30px;
    	}
    </style>
    </head>
    <body >body 
    
    <table id="table1">
      <tr>
        <td>
            table1
          <table> 
            <tr>
             <td>table1-1 </td>
           </tr>
          </table>
    
    </td>
    </tr>
    </table>
    
    <table id="table2">
      <tr>
        <td>table2
    
          <table> 
            <tr>
              <td>table2-1</td>
            </tr>
          </table>
    
        </td>
      </tr>
    </table>
    
    </body>
    </html>

  3. #3
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,259
    Mentioned
    245 Post(s)
    Tagged
    1 Thread(s)
    Well, you don't need to use style tags unless you're creating a design for a e-mail template where everything has to be done the other way around... yet, if you're indeed creating an e-mail template, I would avoid nesting tables. Well, I would avoid nesting tables as much as I can in any situation.

    So, before giving my expert advice... what are we really trying to do? Because if it is a regular web page I am curious to know why you are coding like if you were in the early 90s


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •