cell 相关问题

这是我到目前为止得到的：这是我到目前为止得到的： <center><table border="0" width="100%"> <tr> <td></td> <td align="center" valign="top" colspan="8" bgcolor="#000000" bordercolor="#FFFFFF"><p align="center"><font color="#FFFFFF" face="Arial">Table title</font></p> </td> <td></td> </tr> <tr> <td></td> <td align="center" valign="top" width="200" colspan="2" bgcolor="#F0F0F0" bordercolor="#FFFFFF"><div style="max-width: 200px"><p align="center"><a href="link url" title="1" style="text-decoration: none"><font face="Arial">1</font></a></p></div> </td> <td align="center" valign="top" width="200" colspan="2" bgcolor="#F0F0F0" bordercolor="#FFFFFF"><div style="max-width: 200px"><p align="center"><a href="link url" title="2" style="text-decoration: none"><font face="Arial">2</font></a></p></div> </td> <td align="center" valign="top" width="200" colspan="2" bgcolor="#F0F0F0" bordercolor="#FFFFFF"><div style="max-width: 200px"><p align="center"><a href="link url" title="3" style="text-decoration: none"><font face="Arial">3</font></a></p></div> </td> <td align="center" valign="top" width="200" colspan="2" bgcolor="#F0F0F0" bordercolor="#FFFFFF"><div style="max-width: 200px"><p align="center"><a href="link url" title="4" style="text-decoration: none"><font face="Arial">4</font></a></p></div> </td> <td></td> </tr> <tr> <td></td> <td align="center" valign="top" width="200" colspan="2" bgcolor="#C0C0C0" bordercolor="#FFFFFF"><div style="max-width: 200px"><p align="center"><a href="link url" title="5" style="text-decoration: none"><font face="Arial">5</font></a></p></div> </td> <td align="center" valign="top" width="200" colspan="2" bgcolor="#C0C0C0" bordercolor="#FFFFFF"><div style="max-width: 200px"><p align="center"><a href="link url" title="6" style="text-decoration: none"><font face="Arial">6</font></a></p></div> </td> <td align="center" valign="top" width="200" colspan="2" bgcolor="#C0C0C0" bordercolor="#FFFFFF"><div style="max-width: 200px"><p align="center"><a href="link url" title="7" style="text-decoration: none"><font face="Arial">7</font></a></p></div> </td> <td align="center" valign="top" width="200" colspan="2" bgcolor="#C0C0C0" bordercolor="#FFFFFF"><div style="max-width: 200px"><p align="center"><a href="link url" title="8" style="text-decoration: none"><font face="Arial">8</font></a></p></div> </td> <td></td> </tr> <tr> <td></td> <td align="center" valign="top" width="100" bgcolor="#F0F0F0" bordercolor="#FFFFFF"><div style="max-width: 100px"></div> </td> <td align="center" valign="top" width="200" colspan="2" bgcolor="#F0F0F0" bordercolor="#FFFFFF"><div style="max-width: 200px"><p align="center"><a href="link url" title="9" style="text-decoration: none"><font face="Arial">9</font></a></p></div> </td> <td align="center" valign="top" width="200" colspan="2" bgcolor="#F0F0F0" bordercolor="#FFFFFF"><div style="max-width: 200px"><p align="center"><a href="link url" title="10" style="text-decoration: none"><font face="Arial">10</font></a></p></div> </td> <td align="center" valign="top" width="100" colspan="2" bgcolor="#F0F0F0" bordercolor="#FFFFFF"><div style="max-width: 200px"><p align="center"><a href="link url" title="11" style="text-decoration: none"><font face="Arial">11</font></a></p></div> </td> <td align="center" valign="top" width="100" bgcolor="#F0F0F0" bordercolor="#FFFFFF"><div style="max-width: 100px"></div> </td> <td></td> </tr> </table> </center> 问题在于它没有按应有的方式对齐。每个单元格应限制为 200 像素，最后一行的两个外部单元格应限制为 100 像素。有十一个选项可供选择，我希望在表格中正确对齐。由于 11 是素数，因此总是有一个空单元格，我尝试通过将底行的一个单元格切成两半来解决这个问题。结果看起来不正常，表格太宽并且所有单元格宽度不均。它们都不受指定宽度的限制。我没有使用CSS，我不知道它是如何工作的。毕竟我只是 HTML 的初学者。我很确定我做错了一件简单的事情，但它是什么？嗨帕特里克我很抱歉，但整个方法是错误的...... 首先，您正在使用的一半 html 标签已被弃用，其次，您尝试使用表格单元格来“填充”表格的内容，这对于一个或两个单元格来说很好，但不适合作为一种设计方法。我建议你退一步学习 CSS 基础知识并分离 CSS 代码。这将使表格工作变得更容易，因为所有混乱的属性都将从 html 代码中消失。我复制了你的代码并对其进行了修改，以便： CSS 是分离的已替换已弃用的标签大多数额外的“填充”单元格已从表格中删除大部分有问题的 HTML 嵌套已被删除 .tableLayout{ table-layout: fixed; width: 100%; } .centerAlignText{ text-align: center; } .tableHead{ vertical-align: top; background-color: #000000; color: white; border-color: #FFFFFF; } .tableData{ vertical-align: top; width: 200px; background-color: #F0F0F0; border-color: #FFFFFF; } .tableDataWhiteRow{ vertical-align: top; width: 200px; background-color: #F0F0F0; } .tableDataGreyRow{ vertical-align: top; width: 200px; background-color: #C0C0C0; bordercolor: #FFFFFF; } .tableDataPadding{ vertical-align: top; width: 100px; background-color: #F0F0F0; bordercolor: #FFFFFF; } .fontClass{ font-family: Arial; text-decoration: none; } /* attributes changed: valign to vertical-align bgcolor with background-color bordercolor with border-color */ <div class="centerAlignText"> <table class="tableLayout"> <thead> <tr> <th class="tableHead" colspan="8"> <p class="centerAlignText"> <span class="fontClass">Table title</span> </p> </th> </tr> </thead> <tbody> <tr> <td class="tableDataWhiteRow" colspan="2"> <p> <a class="fontClass" href="link url" title="1"> <span>1</span> </a> </p> </td> <td class="tableDataWhiteRow" colspan="2"> <p> <a class="fontClass" href="link url" title="2"> <span>2</span> </a> </p> </td> <td class="tableDataWhiteRow" colspan="2"> <p> <a class="fontClass" href="link url" title="3"> <span>3</span> </a> </p> </td> <td class="tableDataWhiteRow" colspan="2"> <p> <a class="fontClass" href="link url" title="4"> <span>4</span> </a> </p> </td> </tr> <tr> <td class="tableDataGreyRow" colspan="2"> <p> <a class="fontClass" href="link url" title="5"> <span>5</span> </a> </p> </td> <td class="tableDataGreyRow" colspan="2"> <p> <a class="fontClass" href="link url" title="6"> <span>6</span> </a> </p> </td> <td class="tableDataGreyRow" colspan="2"> <p> <a class="fontClass" href="link url" title="7"> <span>7</span> </a> </p> </td> <td class="tableDataGreyRow" colspan="2"> <p> <a class="fontClass" href="link url" title="8"> <span>8</span> </a> </p> </td> </tr> <tr> <td class="tableDataPadding" colspan="1"> </td> <td class="tableDataWhiteRow" colspan="2"> <p> <a class="fontClass" href="link url" title="9"> <span>9</span> </a> </p> </td> <td class="tableDataWhiteRow" colspan="2"> <p> <a class="fontClass" href="link url" title="10"> <span>10</span> </a> </p> </td> <td class="tableDataWhiteRow" colspan="2"> <p> <a class="fontClass" href="link url" title="11"> <span>11</span> </a> </p> </td> <td class="tableDataPadding" colspan="1"> </td> </tr> </tbody> </table> </div>  相信我，使用分离的 CSS 进行编码要容易得多

html width cell

回答 1 投票 0

cell 相关问题

最新问题