如何将两行 \'Ninja \' 合并为同名 \'Ninja\' 的一行？答案

【问题标题】：how can i merge the two rows 'Ninja ' in one row with the same name 'Ninja'?如何将两行 \'Ninja \' 合并为同名 \'Ninja\' 的一行？
【发布时间】：2022-11-30 10:09:42
【问题描述】：

如何将两行“Ninja”合并为同名“Ninja”的一行？我在第一个 Ninja 中使用了 rowspan，但为什么不起作用？ i want to make the table looks good 这是我的代码：

<body>
    <Table style="width:100%" border="2" > <caption>Member's Data</caption>
        <thead>
            <tr>
                <th>Groupe </th>
                <th>Avatar</th>
                <th>Name</th>
                <th>Email</th>
                <th>Character</th>
                <th>profile</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td> Ninja </td>
                <td> 
                    <img src="https://icons.iconarchive.com/icons/apathae/satellite/256/2-Pictures-icon.png" alt="" height="40px" width="40px">
                
                </td>
                <td> Osama <br> Mohamed</td>
                <td>
                    o1@nn.sa <br> <hr> o2@nn.sa
                </td>
                <td>    &copy; </td>
                <td> <a href="https://www.google.com" target="_blank">profile</a></td>
            </tr>

        </tbody>
        <tbody>
                <tr>
                    <td>Ninja</td>
                    <td> 
                        <img src="https://icons.iconarchive.com/icons/treetog/i/256/Pictures-icon.png" alt="" height="40px" width="40px">
                    </td>
                    <td>Shady <br>Nabil </td>
                    <td>s@nn.sa </td>
                    <td>    &#8482; </td>
                    <td> <a href="https://www.gmail.com" target="_blank"> profile </a></td>
                </tr>
            </tbody>
            <tbody>
                <tr>
                    <td>Monsters</td>
                    <td> 
                        <img src="https://icons.iconarchive.com/icons/itzikgur/my-seven/256/Pictures-Canon-icon.png" alt="" height="40px" width="40px">
                    </td>
                    <td>Mohamed <br> Ibrahim</td>
                    <td> m@nn.sa </td>
                    <td> &reg; </td>
                    <td> <a href="https://www.amazon.com" target="_blank">profile</a></td>
                </tr>
        </tbody>

谢谢您的回答

【问题讨论】：

标签： html html-table

【解决方案1】：

您可以使用 rowspan 属性使单元格与其他单元格合并。要让它工作，你必须删除<thbody>。代码将是这样的

<!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 style="width:100%" border="2" > <caption>Member's Data</caption>
        <thead>
            <tr>
                <th>Groupe </th>
                <th>Avatar</th>
                <th>Name</th>
                <th>Email</th>
                <th>Character</th>
                <th>profile</th>
            </tr>
        </thead>
            <tr>
                <td rowspan="2"> Ninja </td>
                <td> 
                    <img src="https://icons.iconarchive.com/icons/apathae/satellite/256/2-Pictures-icon.png" alt="" height="40px" width="40px">
                
                </td>
                <td> Osama <br> Mohamed</td>
                <td>
                    o1@nn.sa <br> <hr> o2@nn.sa
                </td>
                <td>    &copy; </td>
                <td> <a href="https://www.google.com" target="_blank">profile</a></td>
            </tr>
                <tr>
                    <td> 
                        <img src="https://icons.iconarchive.com/icons/treetog/i/256/Pictures-icon.png" alt="" height="40px" width="40px">
                    </td>
                    <td>Shady <br>Nabil </td>
                    <td>s@nn.sa </td>
                    <td>    &#8482; </td>
                    <td> <a href="https://www.gmail.com" target="_blank"> profile </a></td>
                </tr>
                <tr>
                    <td>Monsters</td>
                    <td> 
                        <img src="https://icons.iconarchive.com/icons/itzikgur/my-seven/256/Pictures-Canon-icon.png" alt="" height="40px" width="40px">
                    </td>
                    <td>Mohamed <br> Ibrahim</td>
                    <td> m@nn.sa </td>
                    <td> &reg; </td>
                    <td> <a href="https://www.amazon.com" target="_blank">profile</a></td>
                </tr>
        
</body>
</html>

对于这样的输出：

【讨论】：