问题与绘图用行跨度表和合并单元格使用HTML

我已经开始绘制表格在HTML中。我希望绘制问题与绘图用行跨度表和合并单元格使用HTML

观察在1.1和3.1开始中心即2.2开始以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中。

来源

2016-07-27 Pawan

表格应只用于表格数据，而不是布局。 – CryptoPiggy

默认：左浮动，所以2.2浮到右侧则不够3.1浮在左侧 – kollein

要居中表中的文本？ – Fil

我想你会需要为了得到这个工作，指定单元格高度。

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>

来源

2016-07-27 05:53:43 Rohit

看起来不像OP请求 – Justinas

现在它在Firefox中看起来也不错。 –

使用边界崩溃：崩溃;以表格样式试试这个代码

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>

来源

2016-07-27 05:55:37

OP不询问边框或文本对齐。 – Justinas

我不清楚OP在问什么。 –

很明显，您的餐桌与OP图片 – Justinas

尝试这种风格

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

和你的表的代码，

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

来源

2016-07-27 05:56:42 Fil

你的代码是为rowspans写细，检查它是否有帮助

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

来源

2016-07-27 06:22:51 Anshum

问题与绘图用行跨度表和合并单元格使用HTML

回答

相关问题