Make table2-1 inherit table2

HTML & CSS
1

make table2-1 inherit from table2

<!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">[SIZE=5]table2[/SIZE]

      <table> 
        <tr>
          <td style="font-size:30px">[SIZE=5]table2-1[/SIZE]</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

You can give id’s to main tables (1 and 2) and style them accordingly. Something like the below 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

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 :slight_smile: