Html表格-复杂布局-特定

ugmeyewa  于 2022-12-02  发布在  其他
关注(0)|答案(6)|浏览(168)

我在一次作业中得到了这个表,但是我很难复制它:

(来源:evc-cit.info
我似乎无法让Xpath单元格和XSL转换单元格共享上午11点到下午2点的单元格,有人能帮助我吗?

t5fffqht

t5fffqht1#

我带着同样的疑问来到这里,尽管它已经得到了回答,但这不是一个很好的解释,所以我花了很长时间来解决这个问题。你需要把XLS转换放在第三行,而不是第二行。请看下面的代码。

<!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8">
            <meta name="description" content="">
            <meta name="keywords" content="">
            <title>Table Practice</title>
        </head>
        <body>
            <table border="1" align="center" cellpadding="10px">
                <thead>
                    <tr>
                        <th rowspan="3">Day</th>
                        <th colspan="3">Seminar</th>
                    </tr>
                    <tr>
                        <th colspan="2">Schedule</th>
                        <th rowspan="2">Topic</th>
                    </tr>
                    <tr>
                        <th>Begin</th>
                        <th>End</th>
                    </tr>
                </thead>
        
                <tbody>
                    <tr>
                        <td rowspan="2">Monday</td>
                        <td rowspan="2">8:00 a.m</td>
                        <td rowspan="2">5:00 p.m</td>
                        <td>Introduction to XML</td>
                    </tr>
                    <tr>
                        <td>Validity: DTD and Relax NG</td>
                    </tr>
                    <tr>
                        <td rowspan="4">Tuesday</td>
                        <td>8:00 a.m</td>
                        <td>11:00 a.m</td>
                        <td rowspan="2">XPath</td>
                    </tr>
                    <tr>
                        <td rowspan="2">11:00 a.m</td>
                        <td rowspan="2">2:00 p.m</td>
                    </tr>
                    <tr>
                        <td rowspan="2">XSL transformation</td>
                    </tr>
                    <tr>
                        <td>2:00 p.m</td>
                        <td>5:00 p.m</td>
                    </tr>
                    <tr>
                        <td>Wednesday</td>
                        <td>8:00 a.m</td>
                        <td>12:00 p.m</td>
                        <td>XLS Formatting Objects</td>
                    </tr>
        
                </tbody>
            </table>
        
        </body>
        </html>
fcwjkofz

fcwjkofz2#

有点笨拙,但您可以说11:00 am - 2:00 pm实际上是两行,而不是一行(每个单元格将是rowspan=2)。然后Xpath和XSL转换单元格也将是rowspan=2,因为现在有4行。(星期二将是rowspan=4

sauutmhj

sauutmhj3#

<!DOCTYPE html>
<html>
<body>
<table border="1" spacing="0">
        <tr>
            <th rowspan="3">Day</th>
            <th colspan="3">Seminar</th>
        </tr>
        <tr>
            <th colspan="2">Schedule</th>
            <th rowspan="2">Topic</th>
        </tr>
        <tr>
            <th>Begin</th>
            <th>End</th>
        </tr>
        <tr>
            <td rowspan="2">Monday</td>
            <td rowspan="2">8:00 a.m.</td>
            <td rowspan="2">5:00 p.m.</td>
            <td>Introduction to HTML</td>
        </tr>
        <tr>
            <td>
                Validity: DTD and Relax NG
            </td>
        </tr>
        <tr>
            <td rowspan="3">Tuesday</td>
            <td>8:00 a.m.</td>
            <td>11:00 a.m.</td>
            <td rowspan="1.5">XPath</td>
        </tr>
        <tr>
            <td>11:00 a.m.</td>
            <td>2:00 p.m.</td>
            <td rowspan="1.5">XSL Transformations</td>
        </tr>
        <tr>
            <td>2:00 p.m.</td>
            <td>5:00 p.m.</td>
        </tr>
        <tr>
            <td>Wednesday</td>
            <td>8:00 a.m.</td>
            <td>12:00 p.m.</td>
            <td>XSL Formatting Objects</td>
        </tr>
    </table>
</body>

</html>
tv6aics1

tv6aics14#

https://code.sololearn.com/WU73qCVhpik8这是我的cord和这个表是HTML和CSS的组合这是可能的,但总和css添加到运行cord

d7v8vwbk

d7v8vwbk5#

我带着同样的疑问来到这里,尽管它已经得到了解答,但这不是一个很好的解释,所以我花了很长时间来解决。它只适用于Mozilla Firefox。请看下面的代码。(检查Mozilla FireFor上的输出)

<!DOCTYPE html>
<html>
    <head>
        <title>
            Table
        </title>
        <style>
td,th{
text-align: center;

}
        </style>
    </head>
<body>
        <table border="1"  cellpadding="5px">
            <thead>
                <tr>
                    <th rowspan="3">Day</th>
                    <th colspan="3">Seminar</th>
                </tr>
                <tr>
                    <th colspan="2">Schedule</th>
                    <th rowspan="2">Topic</th>
                </tr>
                <tr>
                    <th>Begin</th>
                    <th>End</th>
                </tr>
            </thead>
    
            <tbody>
                <tr>
                    <td rowspan="2">Monday</td>
                    <td rowspan="2">8:00 a.m</td>
                    <td rowspan="2">5:00 p.m</td>
                    <td>Introduction to XML</td>
                </tr>
                <tr>
                    <td>Validity: DTD and Relax NG</td>
                </tr>
                <tr>
                    <td rowspan="4">Tuesday</td>
                    <td>8:00 a.m</td>
                    <td>11:00 a.m</td>
                    <td rowspan="2">XPath</td>
                </tr>
                <tr>
                    <td rowspan="2">11:00 a.m</td>
                    <td rowspan="2">2:00 p.m</td>
                </tr>
                <tr>
                    <td rowspan="2">XSL transformation</td>
                </tr>
                <tr>
                    <td>2:00 p.m</td>
                    <td>5:00 p.m</td>
                </tr>
                <tr>
                    <td>Wednesday</td>
                    <td>8:00 a.m</td>
                    <td>12:00 p.m</td>
                    <td>XLS Formatting Objects</td>
                </tr>
    
            </tbody>
        </table>
    
    
    
<p>By Umer Khalid</p>

</body>

</html>

Output:

5kgi1eie

5kgi1eie6#

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="refresh" content="30">
    <meta name="keywords" content="Time Table">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Time Table</title>
</head>

<body>
   

 
 
     <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="refresh" content="30">
        <meta name="keywords" content="Time Table">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Time Table</title>
    </head>

    <body>
        <!-- Table->1 -->
        <p>
            <strong>TABLE : 1</strong>
        </p>
        <br>
        <table border="2" cellspacing="0" width="500" height="400" cellpadding="8">
            <thead>
                <tr>
                    <th rowspan="12">
                        TCB
                    </th>
                </tr>
                <tr>
                    <th>
                        Order no:
                    </th>
                    <td colspan="4">
                        #ABC001
                    </td>
                </tr>
                <th>
                    Order Date:
                </th>
                <td colspan="4">
                    23-Mar-2022
                </td>
                <tr>
                    <th colspan="4">
                        Customer
                    </th>
                </tr>

                <tr>
                    <th>
                        Name:
                    </th>
                    <td colspan="4">
                        John Paps
                    </td>
                </tr>
                <th>
                    Address:
                </th>
                <td colspan="4">
                    Independence Day 5th str, 11511
                </td>
                <tr>
                    <th colspan="4">
                        Order Details
                    </th>
                </tr>
                <tr>
                    <td>
                        1
                    </td>
                    <td>
                        Of Mice and Men
                    </td>
                    <td>book</td>
                    <td align="center">10.00$</td>
                </tr>
                <tr>
                    <td>
                        2
                    </td>
                    <td>
                        Les Miserables
                    </td>
                    <td>book</td>
                    <td align="center">12.00$</td>
                </tr>
                <tr>
                    <td>
                        3
                    </td>
                    <td>
                        Game of Thrones-S01
                    </td>
                    <td>DVD</td>
                    <td align="center">50$</td>
                </tr>
                <tr>
                    <td>
                        4
                    </td>
                    <td>
                        Samsung Galaxy
                    </td>
                    <td>Mobile Phone</td>
                    <td align="center">200$</td>
                </tr>
                <tr>
                    <th colspan="3" align="right">
                        Total:
                    </th>
                    <td align="center">
                        272.00$
                    </td>
                </tr>
            </thead>
        </table>
        <br>

        <!-- Table->2 -->
        <p>
            <strong>TABLE : 2</strong>
        </p>
        <br>

        <table border="2" cellspacing="0" width="400" height="200" cellpadding="8">
            <tr>
                <td rowspan="2">

                </td>
                <th colspan="2" align="center">Average</th>
                <th rowspan="2">Red eyes</th>
            </tr>
            <tr>
                <th align="center">Height</th>
                <th align="center">Weight</th>
            </tr>
            <tr>
                <th>
                    Males
                </th>
                <td>
                    1.9
                </td>
                <td>
                    0.003
                </td>
                <td>40%</td>
            </tr>
            <tr>
                <th>
                    Females
                </th>
                <td>
                    1.7
                </td>
                <td>
                    0.002
                </td>
                <td>43%</td>
            </tr>

        </table>

        <!-- Table->3 -->
        <p>
            <strong>TABLE : 3</strong>
        </p>
        <br>

        <table border="2" width="600" height="300" cellspacing="0" cellpadding="8">
            <tbody>

                <!-- Part->1 -->

                <tr>
                    <th rowspan="3">Day</th>
                    <th colspan="3">Seminar</th>
                </tr>
                <tr>
                    <th colspan="2">Schedule</th>
                    <th rowspan="2">Topic</th>
                </tr>
                <tr>
                    <th>Begin</th>
                    <th>End</th>
                </tr>

                <!-- Part->2 -->

                <tr>
                    <td rowspan="2">Monday</td>
                    <td rowspan="2">8:00 am</td>
                    <td rowspan="2">5:00 pm</td>
                    <td align="center">Introduction to XML</td>
                </tr>

                <tr>
                    <td align="center">Validity: DTD and Relax NG</td>
                </tr>

                <!-- Part->3 -->

                <tr>
                    <td rowspan="3">Tuesday</td>
                    <td>8:00 am</td>
                    <td>11:00 am</td>
                    <td rowspan="2" align="center">XPath</td>

                </tr>
                <tr>
                    <td>11:00 am</td>
                    <td>2:00 pm</td>
                </tr>
                <tr>
                    <td>2:00 pm</td>
                    <td>5:00 pm</td>
                    <!-- <td rowspan="2">XSL transformation</td> -->
                    <td align="center">XSL transformation</td>
                </tr>

                <!-- Part->4 -->

                <tr>
                    <td>Wednesday</td>
                    <td>8:00 am</td>
                    <td>12:00 pm</td>
                    <td align="center">XLS Formatting Objects</td>
                </tr>
            </tbody>
        </table>
    </body>

    </html>



    <!-- Table->3 -->
    <p>
        <strong>TABLE : 3</strong>
    </p>
    <br>

    <table border="2" width="600" height="300" cellspacing="0" cellpadding="8">
        <tbody>

            <!-- Part->1 -->

            <tr>
                <th rowspan="3">Day</th>
                <th colspan="3">Seminar</th>
            </tr>
            <tr>
                <th colspan="2">Schedule</th>
                <th rowspan="2">Topic</th>
            </tr>
            <tr>
                <th>Begin</th>
                <th>End</th>
            </tr>

            <!-- Part->2 -->

            <tr>
                <td rowspan="2">Monday</td>
                <td rowspan="2">8:00 am</td>
                <td rowspan="2">5:00 pm</td>
                <td align="center">Introduction to XML</td>
            </tr>

            <tr>
                <td align="center">Validity: DTD and Relax NG</td>
            </tr>

            <!-- Part->3 -->

            <tr>
                <td rowspan="3">Tuesday</td>
                <td>8:00 am</td>
                <td>11:00 am</td>
                <td rowspan="2" align="center">XPath</td>

            </tr>
            <tr>
                <td>11:00 am</td>
                <td>2:00 pm</td>
            </tr>
            <tr>
                <td>2:00 pm</td>
                <td>5:00 pm</td>
                <!-- <td rowspan="2">XSL transformation</td> -->
                <td align="center">XSL transformation</td>
            </tr>

            <!-- Part->4 -->

            <tr>
                <td>Wednesday</td>
                <td>8:00 am</td>
                <td>12:00 pm</td>
                <td align="center">XLS Formatting Objects</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

相关问题