HTML表格分组是一种将表格中的数据进行分组的方法,它可以帮助我们更好地理解和控制表格中的数据。它可以使我们更容易地对表格中的数据进行分类和统计,并且可以使我们更容易地对数据进行处理。
<table> <thead> <tr> <th colspan="2">Group 1</th> <th colspan="2">Group 2</th> </tr> </thead> <tbody> <tr> <td>;Data 1A1<;/td>; <;Data 1A2<;/td>; <;Data 2A1<;/td>; <;Data 2A2<;/td>; <tr> ... <tbody> ... ... ... ... ... ... ... ... ... ... ... ... .... .... .... .... .... .... ....
要将一些元素组合在一起,您可以使用 fieldset
元素。它具有局部属性: name,form,disabled
。
您可以在以下代码中了解如何应用fieldset元素。
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<fieldset>
<p>
<label for="name">Name: <input id="name" name="name" /></label>
</p>
<p>
<label for="city">City: <input id="city" name="city" /></label>
</p>
</fieldset>
<fieldset>
<p>
<label for="fave1">#1: <input id="fave1" name="fave1" /></label>
</p>
<p>
<label for="fave2">#2: <input id="fave2" name="fave2" /></label>
</p>
<p>
<label for="fave3">#3: <input id="fave3" name="fave3" /></label>
</p>
</fieldset>
<button>Submit Vote</button>
</form>
</body>
</html>
您可以向每个fieldset
元素添加legend
元素以提供更多信息。
legend
元素必须是fieldset元素的第一个子元素。
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<fieldset>
<legend>Enter Your Details</legend>
<p>
<label for="name">Name: <input id="name" name="name" /></label>
</p>
<p>
<label for="name">City: <input id="city" name="city" /></label>
</p>
</fieldset>
<fieldset>
<legend>Vote For Your Three Favorite Fruits</legend>
<p>
<label for="fave1">#1: <input id="fave1" name="fave1" /></label>
</p>
<p>
<label for="fave2">#2: <input id="fave2" name="fave2" /></label>
</p>
<p>
<label for="fave3">#3: <input id="fave3" name="fave3" /></label>
</p>
</fieldset>
<fieldset>
<legend accesskey="y">
About <u>Y</u>ou (ALT + Y)
</legend>
<p><label for="userName">User name:</label>
<input type="text" name="txtUserName" size="20" id="userName" />
</p>
</fieldset>
<fieldset>
<legend accesskey="u">
About <u>U</u>s (ALT + U)
</legend>
<p>
<label for="referrer">How did you hear about us?</label>:<br/>
<select name="selReferrer" id="referrer">
<option selected="selected" value="">Select answer</option>
<option value="website">Another website</option>
<option value="printAd">Magazine ad</option>
<option value="friend">From a friend</option>
<option value="other">Other</option>
</select>
</p>
</fieldset>
<button>Submit Vote</button>
</form>
</body>
</html>
上面的代码还显示了如何设置长度标签的访问键。
通过将disabled属性应用于fieldset
元素,可以在一个步骤中禁用多个输入元素。
以下代码显示如何使用fieldset
元素禁用输入元素。
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<fieldset>
<legend>Enter Your Details</legend>
<p>
<label for="name">Name: <input id="name" name="name" /></label>
</p>
<p>
<label for="name">City: <input id="city" name="city" /></label>
</p>
</fieldset>
<fieldset disabled>
<legend>Vote For Your Three Favorite Fruits</legend>
<p>
<label for="fave1">#1: <input id="fave1" name="fave1" /></label>
</p>
<p>
<label for="fave2">#2: <input id="fave2" name="fave2" /></label>
</p>
<p>
<label for="fave3">#3: <input id="fave3" name="fave3" /></label>
</p>
</fieldset>
<button>Submit Vote</button>
</form>
</body>
</html>
HTML 颜色值 颜色由红 (R)、绿 (G)、蓝 (B) 组成。颜色值 颜色值由十六进制来表示红、绿、蓝(RGB)。 每个颜色的最低值为 0 (十...
由于XHTML是一个XML应用程序,所以必须改变在基于SGML的HTML 4中完全合法的某些实践。在前面的章节中你已经看到了XHTML语法,所...
React 是一个用于构建用户界面的JavaScript 库。React主要用于构建UI,很人多认为 React 是 MVC 中的 V(视图)。React 起源于 F...
原文在:http://www.aosabook.org/en/distsys.htmlKate Matsudaira开源软件如今已成为最大的一些网站的基础组件。随着这些网站的...
现有版本还是比较粗的翻译...原文地址:http://www.aosabook.org/en/openmpi.html作者:Jeffrey M. Squyres15.1. BackgroundOpen...