`

table_border.html

阅读更多
<html>
	<head>
		<title>表格边框的隐藏</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
		<style type="text/css">
body {
	
	font-family: "宋体";
	font-size: 12px;
	margin-top: 4;
}

.t {
	border: #3399ff;
	border-style: solid;
	border-width: 1px;
	BORDER-COLLAPSE: collapse
}

td {
	font-family: "Tahoma", "MS Shell Dlg";
	font-size: 12px
}

textarea {
	border: 1 solid 
}
</style>
	</head>

	<body  >
		<center>
			<table width="600" border="0" cellspacing="0" cellpadding="0"
				height="30">
				<tr>
					<td>
						<b>表格边框的隐藏</b>
					</td>
				</tr>
			</table>
			<table width="600" border="0" cellspacing="0" cellpadding="8"
				class="t">
				<tr>
					<td>
						<table style="BORDER-COLLAPSE: collapse" borderColor="#3399ff" border="1" width="200" cellpadding="0" cellspacing="0">
							<tr align="center">
								<td>
									普
								</td>
								<td>
									表
								</td>
							</tr>
							<tr align="center">
								<td>
									通
								</td>
								<td>
									格
								</td>
							</tr>
						</table>
					</td>
					<td>
						这是一普通的表格
					</td>
				</tr>
				<tr>
					<td>
						<br>
						<table style="BORDER-COLLAPSE: collapse" borderColor="#3399ff" width="200" border="1" cellspacing="0" cellpadding="0"
							frame=above>
							<tr align="center">
								<td>
									头
								</td>
								<td>
									上
								</td>
							</tr>
							<tr align="center">
								<td>
									有
								</td>
								<td>
									天
								</td>
							</tr>
						</table>
						<br>
					</td>
					<td>
						只显示上边框
					</td>
				</tr>
				<tr>
					<td>
						<table style="BORDER-COLLAPSE: collapse" borderColor="#3399ff" width="200" border="1" cellspacing="0" cellpadding="0"
							frame=below>
							<tr>
								<td align="center">
									脚
								</td>
								<td align="center">
									下
								</td>
							</tr>
							<tr>
								<td align="center">
									有
								</td>
								<td align="center">
									地
								</td>
							</tr>
						</table>
					</td>
					<td>
						只显示下边框
					</td>
				</tr>
				<tr>
					<td>
						<br>
						<table style="BORDER-COLLAPSE: collapse" borderColor="#3399ff" width="200" border="1" cellspacing="0" cellpadding="0"
							frame=vsides>
							<tr>
								<td align="center">
									上不着天
								</td>
								<td>
									&nbsp;
								</td>
							</tr>
							<tr>
								<td>
									&nbsp;
								</td>
								<td align="center">
									下不着地
								</td>
							</tr>
						</table>
						<br>
					</td>
					<td>
						只显示左、右边框
					</td>
				</tr>
				<tr>
					<td>
						<table style="BORDER-COLLAPSE: collapse" borderColor="#3399ff" border="1" cellspacing="0" cellpadding="0" frame=hsides
							width="200">
							<tr>
								<td align="center">
									去掉两边
								</td>
								<td></td>
							</tr>
							<tr>
								<td></td>
								<td align="center">
									只剩“王”字
								</td>
							</tr>
						</table>
					</td>
					<td>
						只显示上、下边框
					</td>
				</tr>
				<tr>
					<td>
						<br>
						<table style="BORDER-COLLAPSE: collapse" borderColor="#3399ff" width="200" border="1" cellspacing="0" cellpadding="0"
							frame=lhs>
							<tr>
								<td width="100" align="center">
									只
								</td>
								<td width="100" align="center">
									有
								</td>
							</tr>
							<tr>
								<td align="center">
									左
								</td>
								<td align="center">
									边
								</td>
							</tr>
						</table>
						<br>
					</td>
					<td>
						只显示左边框
					</td>
				</tr>
				<tr>
					<td>
						<table style="BORDER-COLLAPSE: collapse" borderColor="#3399ff" width="200" border="1" cellspacing="0" cellpadding="0"
							frame=rhs>
							<tr>
								<td width="100" align="center">
									只
								</td>
								<td width="100" align="center">
									有
								</td>
							</tr>
							<tr>
								<td align="center">
									右
								</td>
								<td align="center">
									边
								</td>
							</tr>
						</table>
					</td>
					<td>
						只显示右边框
					</td>
				</tr>
				<tr>
					<td>
						<br>
						<table style="BORDER-COLLAPSE: collapse" borderColor="#3399ff" width="200" border="1" cellspacing="0" cellpadding="0"
							frame=void>
							<tr>
								<td align="center">
									四周
								</td>
								<td align="center">
									去掉
								</td>
							</tr>
							<tr>
								<td align="center">
									只留
								</td>
								<td align="center">
									中间
								</td>
							</tr>
						</table>
					</td>
					<td>
						不显示任何边框
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<hr size="1" color="#3399ff">
						表格边框的显示与隐藏,是可以用frame参数来控制的。请注意它只控制表格的边框图,而不影晌单元格。
						<br>
						只显示上边框 &lt;table frame=above&gt;
						<br>
						只显示下边框 &lt;table frame=below&gt;
						<br>
						只显示左、右边框 &lt;table frame=vsides&gt;
						<br>
						只显示上、下边框 &lt;table frame=hsides&gt;
						<br>
						只显示左边框 &lt;table frame=lhs&gt;
						<br>
						只显示右边框 &lt;table frame=rhs&gt;
						<br>
						不显示任何边框 &lt;table frame=void&gt;
					</td>
				</tr>
			</table>
		</center>
	</body>
</html>

 

分享到:
评论

相关推荐

    table_example.zip_in

    本话题将深入探讨如何在PHP环境中利用CSS创建表格(Table),以"table_example.zip_in"为例,分析其中的"table.css"和"table.html"两个文件。 标题"table_example.zip_in"暗示了这是一个关于表格样例的压缩包,可能...

    CSS_Table.rar

    - 使用`border-collapse`属性可以控制表格边框是否合并,`border-spacing`则定义了单元格之间的距离。 3. **单元格样式**: - `th`(表头)和`td`(数据单元格)的样式可以通过选择器进行区分。例如,`th {text-...

    VC.test.design.HTML.table.code.rar_Table_VC Html

    "VC.test.design.HTML.table.code.rar_Table_VC Html"这个标题暗示我们这里包含的是关于Visual C++(VC)测试下HTML表格设计的一些经典代码示例。这些代码可能是为了帮助开发者更高效地创建和定制HTML表格,从而在...

    html_rar.zip_表格 html

    在HTML中,表格(Table)和表单(Form)是两种常见的元素,它们在网页设计和数据展示中起着至关重要的作用。同时,CSS(Cascading Style Sheets)是用于美化HTML元素样式的关键技术。在这份"html_rar.zip_表格 html...

    HTML_TABLE_数据填充处理.

    HTML表格(HTML Table)是网页设计中用于展示结构化数据的重要元素。在HTML中,我们使用`&lt;table&gt;`标签来创建表格,它包含了若干行`&lt;tr&gt;`(表格行),每一行内又包含若干列`&lt;td&gt;`(表格数据单元格)或`&lt;th&gt;`(表头...

    webfrom- 遍历html生成table.pdf

    &lt;table border="1" cellpadding="0" cellspacing="0" width="80%"&gt; 序号 业务类型 业务编码 满板数量 主料编码 维护人员 维护时间 编辑 for (int i = 0; i &lt; _dt....

    JavaScript table 动态添加行,列

    _table.setAttribute("border","1"); _table.setAttribute("borderColor","black"); _table.setAttribute("width","200"); //创建一行 for(var i=0;i;i++){ var _tr=_table.insertRow(i); //...

    CSS.table.rar_Table_css table_table css_表格css

    以下是一些关于"CSS.table.rar_Table_css table_table css_表格css"中涉及的关键知识点: 1. **表格元素基础**: - `&lt;table&gt;`:这是HTML中创建表格的基本标签,用于定义表格的结构。 - `&lt;tr&gt;`:表示表格行(Table...

    用jsf页面动态创建表格

    &lt;table id="abc" border="1"&gt; &lt;!-- 表头 --&gt; 序号 内容 &lt;!-- 表体 --&gt; &lt;/table&gt; ``` 接下来,通过JavaScript函数实现行的动态添加和删除。 ##### 添加行 ```javascript function addRow() { var ...

    Accp6.0_S1.使用HTML语言和CSS开发商业素材

    4. **列表和表格**:`&lt;ul&gt;`和`&lt;ol&gt;`用于无序和有序列表,`&lt;table&gt;`、`&lt;tr&gt;`、`&lt;td&gt;`等则用于创建数据表格。 5. **表单元素**:HTML表单由`&lt;form&gt;`、`&lt;input&gt;`、`&lt;textarea&gt;`、`&lt;button&gt;`等标签组成,用于用户输入和...

    html_dom_api.rar

    11.3、Border 和 Margin 属性 21 11.4、Layout 属性 22 11.5、List 属性 23 11.6、Positioning 属性 24 11.7、Printing 属性 24 11.8、Table 属性 25 11.9、Text 属性 25 11.10、标准属性 26 12、Table 对象 26 12.1...

    网页命名规范

    2. **主样式定义**:主要包括`body`、`table`、`td`、`tr`和`a`等基本元素的样式设置。 3. **链接样式定义**:例如`link_white`代表白色的链接样式;`link_black`表示黑色链接样式;`link_blue`则是蓝色链接样式。若...

    CSS2 (Chinese)_chm.rar

    10. **表格样式**:CSS2允许对表格进行更细致的样式控制,包括`border-collapse`、`caption-side`、`table-layout`等。 通过阅读这个中文版的CSS2 CHM文件,用户可以深入理解这些概念,学习如何应用CSS2来创建美观...

    FormTable_html_Table_

    本教程将深入探讨HTML中的表格(Table)元素,以及如何使用表格进行排版,同时也会涉及HTML表单(Form)的创建和使用,以及重要的CSS盒子模型。 1. HTML表格(Table): - `&lt;table&gt;`:创建一个基本的表格,它是...

    JavaScript写的table增、批量删、模糊查询、文本框编辑

    _OTable_.setAttribute("border", "1"); _OTable_.setAttribute("width", "800px"); var _Thead_ = _OTable_.createTHead(); var _TRow_ = _Thead_.insertRow(0); for (var _headindex_ = 0; _headindex_ ...

    网上订餐系统__前台界面.pdf

    在 Login.jsp 文件中,我们可以看到HTML表格的使用,例如 `&lt;table width="..." border="..." align="center"&gt;`,它用于定义一个表格,包括表格的宽度、边框和对齐方式。 五、HTML输入框 在 Login.jsp 文件中,我们...

    Select精美下拉框(漂亮)

    + ' border:1 solid '+ SS_ENV.CR.Border+';' + ' background-color:white;' + ' scrollbar-face-color:#D4D0C8;' + ' scrollbar-shadow-color:white;' + ' scrollbar-highlight-color:#F6F5F4;' + ' scrollbar-3...

    Jquery_万年历.rar

    $('#calendar').html('&lt;table&gt;&lt;thead&gt;&lt;tr&gt;日&lt;/th&gt;&lt;th&gt;一&lt;/th&gt;&lt;th&gt;二&lt;/th&gt;&lt;th&gt;三&lt;/th&gt;&lt;th&gt;四&lt;/th&gt;&lt;th&gt;五&lt;/th&gt;&lt;th&gt;六&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;/tbody&gt;&lt;/table&gt;'); var tbody = $('#calendar tbody'); for (var ...

    深入浅出HTML与CSS、XHTML(中文版)--源代码(2)

    在HTML中,`&lt;table&gt;`元素用于创建数据表格,`&lt;img&gt;`元素插入图片,`&lt;iframe&gt;`创建内联框架,而`&lt;form&gt;`和相关元素(如`&lt;input&gt;`、`&lt;select&gt;`、`&lt;textarea&gt;`)则用于创建用户交互的表单。 在实际的Web开发中,HTML...

    second_clone_mazzy.html:我的第二个htmlcss克隆-mazzy

    2. **盒模型**:包括`margin`、`border`、`padding`和`content`,影响元素的大小和位置。 3. **布局技术**:如浮动(`float`)、定位(`position`)、Flexbox(弹性盒子)和Grid(网格布局)用于创建复杂的布局。 ...

Global site tag (gtag.js) - Google Analytics