HTML <table> 标签

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Hannotate SC" }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Hannotate SC"; min-height: 17.0px }
span.s1 { }

HTML 表格<table>的使用

表格用table表示 表格中每一行用tr 一行中的每一列用td表示

例如一个三行两列的表格:

<table>

<tr>

<td>第一行第一列</td>

<td>第一行第二列</td>

</tr>

<tr>

<td>第二行第一列</td>

<td>第二行第二列</td>

</tr>

<tr>

<td>第三行第一列</td>

<td>第三行第二列</td>

</tr>

</table>

th 表示的是表头 表头中的文字默认为加粗居中 th要放在tr中用于替换td,例如:

<table>

<tr>

<th></th>

<th></th>

</tr>

<tr>

<td></td>

<td></td>

</tr>

</table>

table 的常用属性

1.border属性

给表格加边框 默认给所有的td加边框 并且给整个table加外边框 当增大border的值的时候 td 的边框不变 只有最外的变宽

<table border="10"></table>

2.cellspacing属性

表示的是单元格与单元格之间的距离 注意cellspacing=“0” 单元格与单元格之间没有距离 但是边框线的宽度依然是两条线的宽度

表格边框合并的 css 写法 :style="border-collapse: collapse;

这条css 与cellspacing有什么区别?

cellspacing=“0”仅仅是将单元格之间的距离调整为0,但是单元格之间还是两条线

而style="border-collapse: collapse; 是将表格相邻的两条边框合并处理,只有一条线存在。一旦边框合并 cellspacing属性将会失效

3.cellpadding属性 单元格边框与单元格中的文字的距离

4.height:表格的高度 width:表格的宽度

<table height="100px" width="100px"></table>

<table style="height: 100px;width: 100px;"></table>(CSS写法)

5.align属性

设置表格整体在浏览器的位置,已经被淘汰了,不建议使用。

可选值:left center right

6.bgcolor 背景色

bgcolor="red"

7.bordercolor 边框颜色

bordercolor="blue"

8.background 背景图 背景色和背景图同时存在时 背景图会覆盖背景色

background="img/computer.jpg"

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Hannotate SC" }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Hannotate SC"; min-height: 17.0px }
span.s1 { }

<tr>与<td>常用属性

1.

width:单元格宽度

height:单元格高度

当你改变了一行或者

2.bgcolor属性 单元格的背景颜色

<table bgcolor="aqua">

<tr bgcolor="blue">

<td bgcolor="black"></td>

</tr>

</table>

最里面的覆盖外面的

3. align属性 设置单元格中文字水平对其方式,默认局左

可选值:left center right

4.valign属性 设置单元格中文字垂直对其方式,默认局中

可选值:top middle(center) bottom 上 中 下

5.nowrap属性 nowrap="nowrap"

当单元格文字过多时,设置单元行文字不断行显示,但是会把表格的宽度撑大

表格的跨行与跨列

1.跨列:在td上使用属性colspan="n"进行跨列。如果一个单元个跨n列,则单元格右边的n-1个单元格要去掉。

2.跨行:在td上使用属性rowspan="n"进行跨行。 如果一个单元个跨n行,则单元格下边的n-1个单元格要去掉。

时间: 2024-10-15 00:54:53

HTML <table> 标签的相关文章

微信小程序组件解读和分析:十一、label标签

label标签组件说明: label标签,与html的label标签基本一样.label 元素不会向用户呈现任何特殊效果.不过,它为鼠标用户改进了可用性.如果您在 label 元素内点击文本,就会触发此控件.就是说,当用户选择该标签时,就会自动将焦点转到和标签绑定的表单控件上,主要用来改进表单组件的可用性.使用for属性找到对应的id,或者将控件放在该标签下,当点击时,就会触发对应的控件.for优先级高于内部控件,内部有多个控件的时候默认触发第一个控件.目前可以绑定的控件有:<button/>

HTML:form表单中的label标签

label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性.如果你在 label 标签内点击文本,就会触发此控件.就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上). 语法: <label for="控件id名称"> 注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同. 例子如下: <form> 你对什么运动感兴趣:<br />

第7天:input和label标签

今天学的不多,就只学了表单元素中的input和label标签.搬了房子,收拾了一下东西,太累了,所以没有学很多.明天还上班,今天就先到这. 一.input input标签type属性有以下几个:text.password.textarea.radio.checkbox.button.submit.reset按钮1.<input type="button" value="确定">2.<input type="submit" >

关于label标签的研究

一:功能介绍 定义:label 元素不会向用户呈现任何特殊效果.它为鼠标用户改进了可用性.总的来说<label>专为input元素服务,为其定义标记. 用法:<label> 标签的 for 属性与相关元素的 id 属性相同,用来指定是向与哪个元素绑定. 二:应用示例 例子如下: 用户名:<input type="text" name="userName" id="userName"  />,像这个代码运行后,你

[HTML5]label标签使用以及建议

for 属性规定 label 与哪个表单元素绑定. 隐式和显式的联系 标记通常以下面两种方式中的一种来和表单控件相联系:将表单控件作为标记标签的内容,这样的就是隐式形式,或者为 <label> 标签下的 for 属性命名一个目标表单 id,这样就是显式形式. 显式的联系: <label for="SSN">Social Security Number:</label> <input type="text" name=&quo

label 标签

在表单布局中会遇到label标签的使用,label没有任何样式效果,有触发对应表单控件功能.比如我们点击单选按钮或多选框前文字对应选项就能被选中,这个就是对文字加了<label>标签实现. 一.点击文字,对应选择上控件   -   TOP 点击<label>标签文字时,实现对应控件被选择,需要对应表单控件id的值与label标签内的for值相同. 二.label语法   -   TOP <label for="man">男</label>

容易被忽略的label标签

# 容易被忽略的label标签 ## 原始作用 `label`标签是HTML原生的标签,其原始的作用参考[这里](http://www.w3school.com.cn/tags/tag_label.asp) label 标签为 input 元素定义标注(标记). label 元素不会向用户呈现任何特殊效果.不过,它为鼠标用户改进了可用性.如果您在 label 元素内点击文本,就会触发此控件.就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上. label 标签的 for

label标签

label标签功能:用于给各个元素定义快捷键 通过accesskey实现 *accesskey:用于定义快捷键 *for:用于指明作用的元素,即指定元素的id 代码举例: <html> <form> <table> <td><label accesskey="u" for="userid">user:</label></td> <td><input type=&qu

html form &lt;label&gt;标签基础语法结构与使用案例教程

在表单布局中会遇到label标签的使用,label没有任何样式效果,有触发对应表单控件功能.比如我们点击单选按钮或多选框前文字对应选项就能被选中,这个就是对文字加了<label>标签实现. 点击<label>标签文字时,实现对应控件被选择,需要对应表单控件id的值与label标签内的for值相同. 请看下面代码 <form action="" method="get"> 性别:<br /> <input name

label标签的用法

label 标签for属性 <h1>显式指定通过for(for的值就是对应radio的id的值)</h1> <form> <label for="male">Male</label> <input type="radio" name="sex" id="male" /> <br /> <label for="female&quo