上面的表格是我需要做的。下表是我提出的:
我的代码:
<!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上运行)。有什么想法吗?
谢谢。
答案 0 :(得分:0)
这只是一个疯狂的猜测,但您正在寻找的字体可能是“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;">
答案 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。首先,确定要定位的元素。 id
或class
通常是一种很好的方法。例如:
<td rowspan="2" id="column3Cell">
然后在CSS中,您可以定位该元素并对其应用样式:
#column3Cell {
padding-top: 10px;
}
根据需要进行调整。由于这里的目标是尽可能准确地复制屏幕截图,因此对其进行近似处理需要进行一些调整和反复试验。但是你可以在这里使用CSS样式进行很多。