table表单中的属性

表格属性

<table>标签里需要设置的属性

border:表格的边框。比如,border=1,表示表格边框的粗细为1个像素,

为0表示没有边框。

cellspacing:单元格间距。当一个表格有多个单元格时,各单元格的距离就是cellspacing,

表格只有一个单元格,这个单元格与表格上、下、左、右边边框的距离也是cellspacing。

cellpadding:单元格衬距。指该单元格里的内容与cellspacing区域的距离,

cellspacing为0,表示单元格里的内容与表格周边边框的距离。

width:表格的宽度。width的取值还可以使用百分比,如widht="100%"。

height:表格的高度,取值方法同width。

bgcolor:表格的背景色。bgcolor=#ff0000或bgcolor=red。

<td>单元格也可有此属性。

background:表格的背景图。<td>也有此属性。

bordercolor:表格的边框颜色,当border值不为0时此值有效。取值同bgcolor。

bordercolorlight:亮边框颜色,当border值不为0时设置此值有效。

亮边框指表格的左边和上边的边框。

bordercolordark:暗边框颜色,当border值不为0时设置有效。

暗边框指表格的右边和下边的边框。

align:表格的对齐方式,值有left(左对齐)、center(居中)以及right(右对齐)。

列1 表格式样和代码

本表格的属性设置:

边框大小:border=1

边框颜色:bordercolor=#808000

背景色:bgcolor=#cc9968

表格宽度:width=300

单元格间距:cellspcing=8

单元格衬距:cellpadding=4

表格的对齐方式(居中):align=center

注:其他属性未设置。

代码

<TABLE borderColor=#808000 cellSpacing=8 cellPadding=4 width=300 align=center bgColor=#cc9968 border=1> 
<TBODY> 
<TR> 
<TD> 
<P>本表格的属性设置:</P> 
<P>边框大小:border=1 </P> 
<P>边框颜色:bordercolor=#808000 </P> 
<P>背景色:bgcolor=#cc9968 </P> 
<P>表格宽度:width=300 </P> 
<P>单元格间距:cellspcing=8 </P> 
<P>单元格衬距:cellpadding=4 </P> 
<P>表格的对齐方式(居中):align=center </P> 
<P>注:其他属性未设置。 </P></TD></TR></TBODY></TABLE>

eg.

<html>
  <head>
  <style>
  table
  {
  width:740ox;
  height:211px;
  border:solid 1px #d9e4f2;
  margin-left:auto;
  margin-right:auto
  }
  td
  {
  font-family:宋体;
  font-size:14px;
  width:293px;
  height:34px;
  text-align:left;
  padding-left:10px;
  }
  th
  {
  font-family:宋体;
  font-size:14px;
  font-weight:normal;
  width:110px;
  height:34px;
  text-align:left;
  padding-left:10px;
  border:solid 1px #d9e4f2;
  background-image:url(images/bg2.png);
  }
  </style>
  </head>
  <body>
  <table border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse">
  <tr>
  <th>职位分类</th>
  <td colspan="3">前端开发工程师</td>
  </tr>
  <tr>
  <th>职位分类</th>
  <td>上海黄浦</td>
  <th>工作性质</th>
  <td>全职</td>
  </tr>
  <tr>
  <th>工作地点</th>
  <td>3000-5000(元、月)</td>
  <th>福利待遇</th>
  <td>无/面谈</td>
  </tr>
  <tr>
  <th>工作经验</th>
  <td>一年以上</td>
  <th>年龄要求(岁)</th>
  <td>20-30</td>
  </tr>
  <tr>
  <th>学历要求</th>
  <td>大专(含以上)</td>
  <th>性别要求</th>
  <td>不限</td>
  </tr>
  <tr>
  <th>招聘人数</th>
  <td>5人</td>
  <th>隶属部门</th>
  <td>总部 研发部</td>
  </tr>
   
  </table>
  </body>
  </html>
时间: 2024-10-06 15:18:54

table表单中的属性的相关文章

form表单中enctype属性作用

上传文件时,提交的表单属性里需要加enctype="multipart/form-data",才能提交文件信息,不然会报错.那么enctype属性的作用是什么?就是设置表单传输的编码. enctype属性有三种: 1.application/x-www-form-urlencoded 2.multipart/form-data 3.text/plain 其中,第一种是enctype属性的默认值.所以平时不填,其实就是这个值.第二种是用来提交非文本的内容,比如图片,音乐等.第三种是用来提

struts之动态方法调用改变表单action属性

一.动态方法调用(DMI:Dynamic Method Invocation) ⒈struts2中同样提供了这个包含多个逻辑业处理的Action,这样就可以在一个Action中进行多个业务逻辑处理.例如:当用户通过不同的提交按钮来提交同一个表单的时候,系统通过不同的方法来处理用户不同的请求,这时候就需要让同一个Action中包含有多个控制处理的逻辑. ⒉动态方法调用有: ①.改变struts.xml中的action中的method属性. ②.改变form表单中的action属性来改变不同提交的请

表单中&lt;form&gt;的enctype属性

application/x-www-form-urlencoded.multipart/form-data.text/plain 上传文件的表单中<form>要加属性enctype="multipart/form-data",很多人只是死记硬背知道上传表单要这么 写,知其然而不知其所以然.那到底为什么要添加这个属性呢?它是什么意思呢?它又有什么其他可选值呢? 其实form表单在你不写enctype属性时,也默认为其添加了enctype属性值,默认值是enctype=&quo

表单中输入内容,搜索时,下面table中该列中包含关键字的高亮显示

有时候为了在搜索时清楚直观,需要关键字的高亮显示, 效果如下: 思想:在下面table中,本来应该是直接渲染数据,此时,可以先写一个方法,里面包含两个参数,分别是该显示的内容以及进行搜索时输入的关键字,在该方法中,进行判断,若是该列内容中包含关键字,则将关键字颜色改变,然后替换掉:若是没有,则还是原样显示. 表单中: table表格中: 此时需要写关键字高亮显示的方法: 在该方法中,可以使用if判断来进行替换,也可以使用正则来写. 原文地址:https://www.cnblogs.com/520

PHP 表单中的enctype属性

连接地址:http://blog.csdn.net/freshlover/article/details/8603648 1:表单中有上传要用multipart/form-data 2:一般不用text/plain",有空能$_post[]可能取不到值

html与表格(table)相关的属性

<table> 标签定义 HTML 表格.简单的 HTML 表格由 table 元素以及一个或多个 tr.th 或 td 元素组成.tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元.更复杂的 HTML 表格也可能包括 caption.col.colgroup.thead.tfoot 以及 tbody 元素. table标签除了具有html元素中通用的属性外,还含有自己的属性,常用属性如下: bgcolor:规定表格边框的宽度. cellpadding:规定单元边沿与其内容之间的

jQuery_review之表单中的隔行变色以及关键字高亮显示

在很多项目中,当然可以避免使用table,而使用div来替代,但是为了能够快速的交付项目,而且对网络优化以及搜索引擎没有太高的妥协的话,我们当然可以使用喜闻乐见的表格来进行布局.使用表格布局非常适合项目团队中有很多都是新成员,技术尚未成熟到可以从容判断div的布局会带来什么问题的情况.下面是使用table进行布局实现表格中隔行变色以及关键字高亮显示的jQuery实现. 这里要注意几个事情就是table的CSS设置中,thead以及tbody中是不好设置border属性的,所以只能妥协使用td的b

表单中Readonly和Disabled的区别

Readonly和Disabled是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容.但是它们之间有着微小的差别,总结如下: Readonly只针对input(text / password)和textarea有效,而disabled对于所有的表单元素都有效,包括select, radio, checkbox, button等. 但是表单元素在使用了disabled后,当我们将表单以POST或GET的方式提交的话,这个元素的值不会被传递出去,而readonly会将该值传递出去(

jQuery的下面是动态表格动态表单中的HTML代码

动态表格动态表单中的Jquery代码 <script type="text/javascript" src="/include/jquery/jquery-1.1.3.1.pack.js"></script><script language="javascript">$("#addjobline").css("cursor","pointer");$(