p13
#graph { border: solid black 1px; } /* Chart has a simple border */
border 属性设置一般用来设置表格的边框
默认没有边框
设置table的边框后每个td也有了边框，但是没有内容的地方无边框
border修改的更具体的设置：（引自于w3school）
| 值 | 描述 |
|---|---|
| border-width | 规定边框的宽度。参阅：border-width 中可能的值。 |
| border-style | 规定边框的样式。参阅：border-style 中可能的值。 |
| border-color | 规定边框的颜色。参阅：border-color 中可能的值。 |
| inherit | 规定应该从父元素继承 border 属性的设置。 |
更具体的设置border
by the way
border属性似乎支持的元素有限，目前只尝试出了border有这个属性
th, td { vertical-align: top; } /* Don't center table cells */vertical-align属性设置一个元素的垂直对齐。
| 值 | 描述 |
|---|---|
| baseline | 默认。元素放置在父元素的基线上。 |
| sub | 垂直对齐文本的下标。 |
| super | 垂直对齐文本的上标 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| text-top | 把元素的顶端与父元素字体的顶端对齐 |
| middle | 把此元素放置在父元素的中部。 |
| bottom | 把元素的底端与行中最低的元素的顶端对齐。 |
| text-bottom | 把元素的底端与父元素字体的底端对齐。 |
| length | |
| % | 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。 |
| inherit | 规定应该从父元素继承 vertical-align 属性的值。 |
</style>
</head>
<body>
<!--
This is an HTML table with <input> elements that allow the user to enter data
and <span> elements in which the program can display its results.
These elements have ids like "interest" and "years". These ids are used
in the JavaScript code that follows the table. Note that some of the input
elements define "onchange" or "onclick" event handlers. These specify(指定） strings
of JavaScript code to be executed when the user enters data or clicks.
-->
<table>
<tr>
<th>Enter Loan Data:</th>
<td></td>
<th>Loan Balance, Cumulative Equity, and Interest Payments</th>
</tr>
<tr>
<td>Amount of the loan ($):</td>
<td><input id="amount" onchange="calculate();"></td>
<td rowspan=8>
<canvas id="graph" width="400" height="250"></canvas></td>
</tr>
<tr>
<td>Annual interest (%):</td>
<td><input id="apr" onchange="calculate();"></td></tr>
<tr><td>Repayment period (years):</td>
<td><input id="years" onchange="calculate();">
</td>
<tr>
<td>Zipcode (to find lenders):</td>
<td><input id="zipcode" onchange="calculate();"></td>
<tr>
<th>Approximate Payments:</th>
<td><button onclick="calculate();">Calculate</button></td>
</tr>
<tr>
<td>Monthly payment:</td>
<td>$<span class="output" id="payment"></span></td>
</tr>
<tr>
<td>Total payment:</td>
<td>$<span class="output" id="total"></span></td>
</tr>
网友评论