我需要在不使用CSS的情況下在HTML中創建這樣一個表格[我附上了一張圖片]-有解無憂

表列印

我需要在 HTML 中創建這樣一個表格而不使用 CSS 我已經嘗試了幾個小時來創建這個表格，但沒有成功，希望得到幫助:)

我附上了我正在處理的代碼。我附上圖片

<!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>

uj5u.com熱心網友回復：

這怎么樣？

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

uj5u.com熱心網友回復：

可以通過嵌套一個表來達到效果：

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>

僅使用行內樣式（根據 OP 請求）：

顯示代碼片段

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/351580.html

標籤：html

上一篇：將圓形按鈕放在導航欄下方

下一篇：我如何使用GitLab睡衣？