Question

这是一个作业问题。

上面的表格是我需要做的。下表是我提出的：

我的代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Question Two</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <h2>Nested Tables</h2>
        <table border="1">
            <tr>
                <th>Header column 1</th>    
                <th>Header column 2</th>
                <th>Header column 3</th>
                <th>Header column 4</th>
            </tr>
            <tr>
                <td>Row 2 - Item 1</td>
                <td>Row 2 - Item 2</td>
                <td rowspan="2">
                    <h4>Row 2: Nested Table 1</h4>
                    <table border="1">                                      
                        <tr>
                            <th>Row 1 Header</th>
                            <td>item</td>
                        </tr>
                        <tr>
                            <th>Row 2 Header</th>
                            <td>item</td>
                        </tr>
                        <tr>
                            <th>Row 3 Header</th>
                            <td>item</td>
                        </tr>
                    </table>
                </td>
                <td>Row 2 - Item 4<br/>A second line</td>
            </tr>
            <tr>
                <td>
                    <h4>Row 3: Nested Table 2</h4>
                    <table border=1>
                        <tr>
                            <th>Row 1 Header</th>
                            <td>item</td>
                        </tr>
                        <tr>
                            <th>Row 2 Header</th>
                            <td>item</td>
                        </tr>
                    </table>
                </td>
                <td>Row 3 - Item 2</td>
                <td rowspan="2">Row 3 - Item 3</td>
            </tr>
            <tr>
                <td>Row 4 - Item 1</td>
                <td>Row 4 - Item 2</td>
                <td>Row 4 - Item 3</td>
            </tr>
            <tr>
                <td colspan="4">Row 5 - Last row of outer table</td>
            </tr>
        </table>
    </body>
</html>

两件事情有所不同：嵌套表1和2的字体和行间距。

根据字体，有没有办法为所有HTML文档设置默认字体？如果是这样，怎么样？
对于间距，我不知道。我尝试了<br>，<pre>，<div>等各种组合。我很确定它不是导致错误结果的浏览器问题（尝试过多个浏览器 - 我使用的是IE，在Windows 7上运行）。有什么想法吗？

谢谢。

Answer 1

这只是一个疯狂的猜测，但您正在寻找的字体可能是“Calibri”或类似的东西。您可以将font-family作为内联样式添加到body标记中，表格中的所有内容都将继承该字体。

<body style="font-family:Calibri;">和here's a demo of it in action。

间距看起来很好，但是如果您需要进行调整，可以使用padding，margin甚至cellpadding进行调整。

这将按10：<table border="1" cellpadding="10">

填充所有单元格中的空格

这将按10px：<td rowspan="2" style="padding-top:10px;">

填充单元格的顶部

Answer 2

根据字体，有没有办法为所有HTML文档设置默认字体？如果是这样，怎么样？

如果它是＆＃34;所有HTML文档＆＃34;使用，然后它将是一个浏览器设置。你自己可能就是那个人。但是如果您想要使用此文档中的所有内容，那么使用CSS很容易。像这样：

<style>
    body {
        font-family: Arial;
        font-size: 1em;
        color: #000;
    }
</style>

将其放在HTML的head中会将该样式应用于body标记的全部内容，包括所有后代。（您也可以将CSS代码放在一个单独的文件中，并使用<link>标记在head中引用它。随着代码复杂性的增加，这很快成为首选方法。）

对于间距，我不知道。我尝试了<br>，<pre>，<div>等各种组合。

我也使用CSS。首先，确定要定位的元素。 id或class通常是一种很好的方法。例如：

<td rowspan="2" id="column3Cell">

然后在CSS中，您可以定位该元素并对其应用样式：

#column3Cell {
    padding-top: 10px;
}

根据需要进行调整。由于这里的目标是尽可能准确地复制屏幕截图，因此对其进行近似处理需要进行一些调整和反复试验。但是你可以在这里使用CSS样式进行很多。

（HTML）如何重现这个嵌套表？

2 个答案: