html怎么设置table边框

html怎么设置table边框,第1张

html设置table的边框的方法是使用border 属性实现。

说明:

border 属性规定表格单元周围是否显示边框。

值 "1" 指示应该显示边框,且表格不用于布局目的。

在 HTML5 中,border 属性仅用于指示表格是否用于布局目的,且只允许属性值 "" 或 "1"。

完整用法举例:

1、html中的table代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>table的边框</title>

</head>

<body>

<table border="1">

<tr>

  <th>Month</th>

  <th>Savings</th>

</tr>

<tr>

  <td>January</td>

  <td>$100</td>

</tr>

<tr>

  <td>February</td>

  <td>$80</td>

</tr>

</table>

</body>

</html>

2、运行后的效果:

最普通最常用最一般的方法就是用submit type..看代码:

<form name=”form” method=”post” action=”#"> 

<input type=”submit” name=”submit” value=”提交"> 

</form>

另外,还有一种常用的方法是使用图片:

<form name=”form” method=”post” action=”# "> 

<input type=”image” name=”submit” src=”btnSubmit.jpg”> 

</form>

使用链接来提交表单,用到了javascript的DOM模型:

<form name=”form” method=”post” action=”#”> 

<a href=”javascript:form.submit()”>提交</a> 

</form>

这种方法实际上是调用了一个javascript函数,使用javacript函数来提交表单,方法就非常多非常灵活了,比如可以把它加入到任意一个标签的onclick事件中:

<form name=”form” method=”post” action=”#”> 

<div onclick=”javascript:form.submit()”> 

<span>提交</span> 

</div> 

</form>

但是,如果一个表单里有需要有多个提交按钮怎么办呢? 

比如一个表单里的提交按钮所指向的处理页面不同,这样由于表单在定义的时候就已经确定下表单数据的处理页面,所以单纯地在表单里放多个提交按钮是没有办法达到目的的。这就需要javascript。 

首先定义一个函数:

<script language=javascript> 

function query(){ 

form.action=”query.php” 

form.submit()} 

function update(){ 

form.action=”update.php” 

form.submit()} 

</script>

通过javascript改变form的action属性值,这样就可以实现多提交按钮而且功能不同了,页面内代码如下:

<form name=”form” method=”post” action=”#”> 

<input type=”button” name=”query” onclick=”query()” value=”查询”> 

<input type=”button” name=”update” onclick=”update()” value=”更新”> 

</form>

上面一段代码,使用的是普通的按钮,而提交功能的实现方法是在它的onclick事件中调用javascript函数.

方法:

<table border=1>

<tr>

<td rowspan=2>1.1</td><td>1.2</td>

</tr>

<tr>

<td>2.2</td>

</tr>

</table>

rowspan合并行,colspan 合并列

定义和用法:

<table>标签定义 HTML 表格。

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。

更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

HTML 与 XHTML 之间的差异:

在 HTML 4.01 中,table 元素的 "align" 和 "bgcolor" 属性是不被赞成使用的。

在 XHTML 1.0 Strict DTD,table 元素的 "align" 和 "bgcolor" 属性是不被支持的。

TIY 实例:

表格

这个例子演示如何在 HTML 文档中创建表格。

表格边框

本例演示各种类型的表格边框。

没有边框的表格

本例演示一个没有边框的表格。

表格中的标题(Headings)

本例演示如何显示表格标题。

空单元格

本例展示如何使用 "&nbsp" 处理没有内容的单元格。

带有标题的表格

本例演示一个带标题 (caption) 的表格

跨行或跨列的表格单元格

本例演示如何定义跨行或跨列的表格单元格。

表格内的标签

本例演示如何在不同的元素内显示元素。

单元格填充(Cell padding)

本例演示如何使用单元格填充来创建单元格内容与其边框之间的空白。

单元格间距(Cell spacing)

本例演示如何使用单元格间距增加单元格之间的距离。

向表格添加背景颜色或背景图像

本例演示如何向表格添加背景

向表格单元添加背景颜色或者背景图像

本例演示如何向一个或者更多表格单元添加背景

在表格单元中排列内容

本例演示如何使用 "align" 属性排列单元格内容,以便创建一个美观的表格。

框架(frame)属性

本例演示如何使用 "frame" 属性来控制围绕表格的边框。


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/7480829.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-06
下一篇 2023-04-06

发表评论

登录后才能评论

评论列表(0条)

保存