时间戳

首页 > 解决方案 > 如何创建html不规则表格？

html - 如何创建html不规则表格？

问题描述

在此处输入图像描述 我想创建一个这样的 HTML 不规则表格。

在此处输入图像描述， 但我不知道我的代码有什么问题

<html>
    <head>
        <title>Test 2</title>
    </head>
    <body>
        <table border="1" width="500px" height="100px">
            <tr>
                <td>Zoology</td>
                <td rowspan="3">Welcome</td>
                <td>Maths</td>
            </tr>
            <tr>
                <td>Batany</td>
                <td rowspan="3">Physics</td>
            </tr>
            <tr>
                <td rowspan="2">Entomology</td>
            </tr>
            <tr>
                <td rowspan="2">Heading</td>
            </tr>
            <tr>
                <td>Toxicology</td>
                <td>Computer</td>
            </tr>
        </table>
    </body>
</html>

请帮忙！

标签： htmlhtml-table

解决方案

<html>
    <head>
        <title>Test 2</title>
        <style>

table, tr, td
{
  border-collapse: collapse;
  border: 2px solid black;
  padding: 5px;
}


tr
{
  height: 30px;
}

        </style>
    </head>
    <body>
        <table border="1" width="500px" height="100px">
            <tr>
                <td>Zoology</td>
                <td rowspan="3">Welcome</td>
                <td>Maths</td>
            </tr>
            <tr>
                <td>Batany</td>
                <td rowspan="3">Physics</td>
            </tr>
            <tr>
                <td rowspan="2">Entomology</td>
            </tr>
            <tr>
                <td rowspan="2">Heading</td>
            </tr>
            <tr>
                <td>Toxicology</td>
                <td>Computer</td>
            </tr>
        </table>
    </body>
</html>

推荐阅读