Question

如何在html中执行下表？

Meteor.startup(() => {
 Accounts.onCreateUser(function(options, user) {
if (options.token)
    user.token = options.token;
if (options.profile)
    user.profile = options.profile;
return user;
 });
})

最后一个是合并两行和两列。

在不使用CSS的情况下感谢您的帮助。

表有5行3列。

Answer 1

＆＃13;

    <table>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td colspan="2">2 & 3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td colspan="2">1 & 2</td>
            <td>3</td>
        </tr>
        <tr>
            <td colspan="2">1 & 2</td>
            <td>3</td>
        </tr>
    </table>

＆＃13;

Answer 2

你可以使用colspan和rowspan来做这件事。 Colspan允许单个表格单元格跨越多个单元格或列的宽度。

Rowspan允许单个表格单元格跨越多个单元格或行的高度。

了解详情：https://html.com/tables/rowspan-colspan/#ixzz4v5ntM7rn

＆＃13;

table, th, td {
    border: 1px solid black;
}

＆＃13;

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td colspan="2">2 & 3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td rowspan="2" colspan="2">1 & 2</td>
         <td >3</td>
    </tr>
    <tr>
        
        <td>3</td>
    </tr>
</table>

＆＃13;

Answer 3

＆＃13;

table, th, td {
    border: 1px solid black;
}

＆＃13;

<table>
  <tr>
    <td>January</td>
    <td>$100</td>
    <td>$50</td>
  </tr>
  <tr>
    <td>January</td>
    <td colspan="2">$50</td>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
    <td>$50</td>
  </tr>
  <tr>
    <td rowspan="2" colspan="2">January</td>
    <td>$50</td>
  </tr>
  <tr>
    <td>$50</td>
  </tr>
</table>

＆＃13;

Answer 4

在colspan代码上使用<td>。

<table>
  <tr>
    <td>Col 1</td>
    <td>Col 2</td>
    <td>Col 3</td> 
  </tr>
  <tr>
    <td>Col 1</td>
    <td colspan="2">Col 2 + Col 3</td>
  </tr>
  <tr>
    <td>Col 1</td>
    <td>Col 2</td>
    <td>Col 3</td>
  </tr>
<table>

https://codepen.io/Toilal/pen/BwxdMg

Answer 5

＆＃13;

tr:nth-child(1), tr:nth-child(3), tr:nth-child(5){
  font-weight: bold;
  font-size: 15pt;
}
tr:nth-child(2){
  font-weight: bold;
  font-size: 14pt;
}
td:nth-child(1){
  border-left: 2px solid black;
  border-right: 2px solid black;
}
td:nth-child(2){
  border-right: 2px solid black;
}
td:nth-child(3){
  border-right: 2px solid black;
}
tr:nth-child(4) > td:nth-child(1), tr:nth-child(4) > td:nth-child(2){
  border-left: none;
  border-right: 1px solid black;
}

＆＃13;

<table>
  <tr>
    <td>Cell1</td>
    <td>Cell2</td>
    <td>Cell3</td>
  </tr>
  <tr>
    <td>Cell1</td>
    <td colspan="2">Cell2 & 3</td>
  </tr>
  <tr>
    <td>Cell1</td>
    <td>Cell2</td>
    <td>Cell3</td>
  </tr>
  <tr>
    <td colspan="2">Cell1 & 2</td>
    <td>Cell3</td>
  </tr>
  <tr>
    <td colspan="2">Cell1 & 2</td>
    <td>Cell3</td>
  </tr>

</table>

＆＃13;

HTML表格单元格合并

5 个答案: