HTMLを使用してrowspanとcolspanを使用してテーブルを描画する際の問題

Question

私はHTMLでテーブルを描画し始めました。私が描きたいのは

2.2の中心が1.1から始まり、3.1が2.2の中心から始まることに注意してください。私はこのために書いた コードは、あなたが出力を見ることができます

<table border="3" width="400" height="200"> 
 
\t <tr> 
 
\t \t <td rowspan="2">1.1</td> 
 
\t \t <td>1.2</td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td rowspan="2">2.2</td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td>3.1</td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td colspan="2">4.1</td> 
 
\t </tr> 
 
<table>

です。コード内の変更を提案することによって、出力が私の望む通りではない理由を誰にでも教えてください。前もって感謝します。

コメントを通過した後、私はコードがクロムで問題なく動作していることがわかりました。問題はFirefoxとEdgeのみです。

Answer 1

この作業を行うには、セルの高さを指定する必要があると思います。

table { 
 
    text-align:center; 
 
    border-collapse:collapse; 
 
    }

<table border="3" width="400" height="200"> 
 
\t <tr> 
 
\t \t <td height="40" rowspan="2">1.1</td> 
 
\t \t <td>1.2</td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td rowspan="2">2.2</td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td>3.1</td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td colspan="2">4.1</td> 
 
\t </tr> 
 
<table>

Answer 2

利用国境崩壊：崩壊。テーブルスタイル に

<table width="400" height="200"> 
    <tr> 
     <td rowspan="2"> 
     <div class="center"> 1.1 </div> 
    </td> 
     <td> 
     <div class="center"> 1.2 </div> 
    </td> 
    </tr> 
    <tr> 
     <td rowspan="2"> 
     <div class="center"> 2.2 </div> 
    </td> 
    </tr> 
    <tr> 
     <td> 
     <div class="center"> 3.1 </div> 
    </td> 
    </tr> 
    <tr> 
     <td colspan="2"> 
     <div class="center"> 4.1 </div> 
    </td> 
    </tr> 
<table> 

Answer 3

を試してみてください助けてくれればこれをチェックしてください

<table border="3" width="400" height="200"> 
    <tr> 
     <td rowspan="3">1.1</td> 
     <td>1.2</td> 
    </tr> 
    <tr>   
     <td rowspan="3">2.2</td> 
    </tr> 
    <tr> 
     <td style="border: none;"></td> 
    </tr> 
    <tr> 
     <td>3.1</td> 
    </tr> 
    <tr> 
     <td colspan="2">4.1</td> 
    </tr> 
<table> 

Answer 4

あなたのコードがrowspansの罰金書かれている、このスタイル

<style media="screen"> 
    table { 
    border-collapse: collapse; 
    } 
    table, tr, td { 
    border: 1px solid black; 
    } 
    .center { 
    text-align: center; 
    } 
</style> 

とテーブルのためのあなたのコードを試してみてください。このコード

table{ 
 
    border-collapse: collapse; 
 
    } 
 

 
td{ 
 
    text-align:center; 
 
    
 
    }

<table border="3" width="500" height="300"> 
 
\t <tr> 
 
\t \t <td rowspan="2">1.1</td> 
 
\t \t <td>1.2</td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td rowspan="2">2.2</td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td>3.1</td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td colspan="2">4.1</td> 
 
\t </tr> 
 
<table>