(HTML)如何重现这个嵌套表?

时间:2016-01-27 17:37:08

标签: html

这是一个作业问题。 The table I need to reproduce

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

My table

我的代码:

<!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的字体和行间距。

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

  2. 对于间距,我不知道。我尝试了<br><pre><div>等各种组合。我很确定它不是导致错误结果的浏览器问题(尝试过多个浏览器 - 我使用的是IE,在Windows 7上运行)。有什么想法吗?

  3. 谢谢。

2 个答案:

答案 0 :(得分:0)

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

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

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

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

填充所有单元格中的空格

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

填充单元格的顶部

答案 1 :(得分:0)

  

根据字体,有没有办法为所有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。首先,确定要定位的元素。 idclass通常是一种很好的方法。例如:

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

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

#column3Cell {
    padding-top: 10px;
}

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