I need to create such a table in HTML Without the use of CSS [I am attaching a picture]-CodePudding

Table Prtscn

I need to create such a table in HTML Without the use of CSS I have been trying for several hours to create this table, but without success, Would appreciate help :)

I enclose the code I was working on. I am attaching a picture

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
        <table border="1"width="400">
            <tr>
        <td>Hello world</td>
       

        <table border="1"width="400">
            
                
        <td>
            <table border="2" cellpadding="1"celspaceing="2">
                
                    <tr>
                        <td>A</td>
                        <td>A</td>
                        <td>A</td>
                    </tr>
            <tr>
                <td>E</td>
                <td>F</td>
                <td>G</td>
                </td>
            </tr>
        
        </table>
       
            <td>Cell B</td>
            <td>Cell C</td>
       
               
       
    
    
            </table>
       
                  <tr>
                    <table border="1"width="400">
            
                        <td>Hi There</td>
                  </tr>
        
     
        </table>
</body>
</html>

CodePudding user response：

How is this?

<table border="1" width="350px" cellpadding="5px">
<tr>
    <td>text</td>
    </tr>
    <tr>
    <td><table>
        <tr>
        <td>
            <font size="5">
                <table border ="2" >
                        <tr>
                        <td>A</td>
                        <td>B</td>
                        <td>C</td>
                    </tr>
                    <tr>
                        <td>D</td>
                        <td>E</td>
                        <td>F</td>
                    </tr>
                </table>
        </font>
    </td>
            <td><table cellspacing="20px"><tr><td></td></tr></table></td>
            <td><table cellspacing="20px"><tr><td></td></tr></table></td>
            <td><table cellspacing="20px"><tr><td>text</td></tr></table></td>
            <td><table cellspacing="20px"><tr><td>text</td></tr></table></td>
        </tr>
        </table></td>
    </tr>
    <tr>
        <td>
            text
        </td>
    </tr>
</table>

CodePudding user response：

The effect can be achieved by nesting a table:

tr{
  border:1px solid;
}

table{
  border-collapse:collapse;
}
#nested td{
  border:1px solid;
}

<table>
  <tr><td colspan="3">text</td></tr>
  <tr>
    <td>
      <table id="nested">
        <tr>
          <td>a</td>
          <td>b</td>
          <td>c</td>
        </tr>
        <tr>
          <td>d</td>
          <td>e</td>
          <td>f</td>
        </tr>
      </table>
    </td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr><td colspan="3">text</td></tr>
</table>

With inline styles only (as per OP request):

Show code snippet

<table style="border-collapse: collapse;">
  <tbody><tr style="border: 1px solid;"><td colspan="3">text</td></tr>
  <tr style="border: 1px solid;">
    <td>
      <table id="nested" style="border-collapse: collapse;">
        <tbody><tr style="border: 1px solid;">
          <td style="border: 1px solid;">a</td>
          <td style="border: 1px solid;">b</td>
          <td style="border: 1px solid;">c</td>
        </tr>
        <tr style="border: 1px solid;">
          <td style="border: 1px solid;">d</td>
          <td style="border: 1px solid;">e</td>
          <td style="border: 1px solid;">f</td>
        </tr>
      </tbody></table>
    </td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr style="border: 1px solid;"><td colspan="3">text</td></tr>
</tbody></table>