web application——HTML表格

表格结构：

<table>
    <tr>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
    </tr>
    <tr>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
    </tr>
    <tr>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
    </tr>
</table>

每一行单元格的数目必须一样

实例：

 1 <!DOCTYPE html>
 2 <html>
 3 <meta charset="utf-8">
 4 <head>
 5    <title>我的网页</title>
 6 </head>
 7 <body>
 8 <table border="1">
 9     <tr>
10        <td>&nbsp</td>
11        <td>&nbsp</td>
12        <td>&nbsp</td>
13     </tr>
14     <tr>
15        <td>&nbsp</td>
16        <td>&nbsp</td>
17        <td>&nbsp</td>
18     </tr>
19     <tr>
20        <td>&nbsp</td>
21        <td>&nbsp</td>
22        <td>&nbsp</td>
23     </tr>
24 </table>
25 </body>
26 </html>

常用属性：

border：边框的粗细

bordercolor：边框颜色

width：固定值或百分比

height：固定值或百分比

bgcolor：表格的背景颜色

background：背景图片

cellpadding：单元格边线到内容间的距离

cellspacing：单元格之间的距离

align：水平对齐方式

rules：合并单元格边框线取值：all 兼容性不好，最好使用css

<tr>

常用属性：

bgcolor：

height：行高没有width

align：文字水平居中

valign：垂直居中取值：top middle bottom

实例：

 1 <!DOCTYPE html>
 2 <html>
 3 <meta charset="utf-8">
 4 <head>
 5    <title>我的网页</title>
 6 </head>
 7 <body>
 8     <table border="1" width="500" rules="all" align="center">
 9     <tr height="100" align="center" valign="middle" bgcolor="#FF0000">
10        <td>编号</td>
11        <td>姓名</td>
12        <td>性别</td>
13        <td>学历</td>
14     </tr>
15     <tr>
16        <td>&nbsp</td>
17        <td>&nbsp</td>
18        <td>&nbsp</td>
19        <td>&nbsp</td>
20     </tr>
21     <tr>
22        <td>&nbsp</td>
23        <td>&nbsp</td>
24        <td>&nbsp</td>
25        <td>&nbsp</td>
26     </tr>
27     <tr>
28        <td>&nbsp</td>
29        <td>&nbsp</td>
30        <td>&nbsp</td>
31        <td>&nbsp</td>
32     </tr>
33     <tr>
34        <td>&nbsp</td>
35        <td>&nbsp</td>
36        <td>&nbsp</td>
37        <td>&nbsp</td>
38     </tr>
39     <tr>
40        <td>&nbsp</td>
41        <td>&nbsp</td>
42        <td>&nbsp</td>
43        <td>&nbsp</td>
44     </tr>
45 </table>
46 </body>
47 </html>

<th>标题单元格自动加粗居中

实例：

 1 <!DOCTYPE html>
 2 <html>
 3 <meta charset="utf-8">
 4 <head>
 5    <title>我的网页</title>
 6 </head>
 7 <body>
 8     <table border="1" width="500" rules="all" align="center">
 9     <tr height="100">
10        <th>编号</th>
11        <th>姓名</th>
12        <th>性别</th>
13        <th>学历</th>
14     </tr>
15     <tr>
16        <td>&nbsp</td>
17        <td>&nbsp</td>
18        <td>&nbsp</td>
19        <td>&nbsp</td>
20     </tr>
21     <tr>
22        <td>&nbsp</td>
23        <td>&nbsp</td>
24        <td>&nbsp</td>
25        <td>&nbsp</td>
26     </tr>
27 </table>
28 </body>
29 </html>

常用属性：

width:就是列宽

height:就是行高

bgcolor:

background:

align:

valign:

rowspan:上下合并单元格

colspan: 左右合并单元格

实例：

 1 <!DOCTYPE html>
 2 <html>
 3 <meta charset="utf-8">
 4 <head>
 5    <title>我的网页</title>
 6 </head>
 7 <body>
 8     <table border="1" width="500" rules="all" align="center">
 9     <tr height="100">
10        <th>编号</th>
11        <th>姓名</th>
12        <th>性别</th>
13        <th>学历</th>
14     </tr>
15     <tr>
16        <td>&nbsp</td>
17        <td>&nbsp</td>
18        <td>&nbsp</td>
19        <td>&nbsp</td>
20     </tr>
21     <tr>
22        <td colspan="4">&nbsp</td>
23     </tr>
24     <tr>
25        <td colspan="3">&nbsp</td>
26        <td>&nbsp</td>
27     </tr>
28     <tr>
29        <td colspan="2">&nbsp</td>
30        <td>&nbsp</td>
31        <td>&nbsp</td>
32     </tr>
33 </table>
34 </body>
35 </html>

实例：

 1 <!DOCTYPE html>
 2 <html>
 3 <meta charset="utf-8">
 4 <head>
 5    <title>我的网页</title>
 6 </head>
 7 <body>
 8     <table border="1" width="500" rules="all" align="center">
 9     <tr height="100">
10        <th>编号</th>
11        <th>姓名</th>
12        <th>性别</th>
13        <th>学历</th>
14     </tr>
15     <tr>
16        <td rowspan="4">&nbsp</td>
17        <td>&nbsp</td>
18        <td>&nbsp</td>
19        <td>&nbsp</td>
20     </tr>
21     <tr>
22        <td>&nbsp</td>
23        <td>&nbsp</td>
24        <td>&nbsp</td>
25
26     </tr>
27     <tr>
28        <td>&nbsp</td>
29        <td>&nbsp</td>
30        <td>&nbsp</td>
31
32     </tr>
33     <tr>
34        <td>&nbsp</td>
35        <td>&nbsp</td>
36        <td>&nbsp</td>
37
38     </tr>
39 </table>
40 </body>
41 </html>

时间： 2024-12-31 03:49:58

web application——HTML表格的相关文章

MVC模式下基于SSH三大框架的java web项目excel表格的导出(不依赖另外的jar包)

最近工作中碰到了需要将web页面的表格内容导出到excel表格并下载到本地的需求.以下是在利用网上资源.与同事探讨下,完成的代码. 首先我们需要有定义好的实体类.以下是截取了项目中用到的部分代码. 1 public class QyggDocuments implements java.io.Serializable { 2 3 private static final long serialVersionUID = -2543382529255041149L; 4 5 private Stri

RxJS入门（7）----创建一个完整的web application

在本章中,使用Rxjs,我们将创建一个典型的web application.我们将转化Dom Object Model(DOM)并且使用node.js中的websocket做c/s的交互. 用户界面部分,我们将使用RxJs-Domlibrary,这同样是Rxjs团队做的库,提供了方便的操作符来处理DOM和浏览器相关的使我们的编码更容易.服务器端:我们将是使用两个建立很好的node库,并用Observable封装他们的一些API到我们的application中. 在这一章之后,你将能使用RxJs创

匿名访问之（一）web application级别

如果用SharePoint做一个对外开放的公共站点,比如公司展示网站,那么浏览网站的人不需要注册和登陆,就应该能看到内容.这个时候就需要对站点开启匿名访问. SharePoint的匿名访问是从上而下的,Farm管理员可以在Central Administration里,在Web Application级别做总控. 在Web Application页面,选择一个Web Application,点击ribbon上的Anonymous Policy: 发现这里的设置并没有开启: 这是因为并没有在这个W

The web application you are attempting to access on this web server is currently unavailable.......

今天去服务器安装了个.net 4.0 framework(原本有1.0和2.0的),配置好站点后,选择版本为4.0,访问出错,错误代码如下 Server Application Unavailable The web application you are attempting to access on this web server is currently unavailable. Please hit the "Refresh" button in your web brows

Visual Studio Create Setup project to deploy web application in IIS

Introduction: In this article I will explain how to create setup file in visual studio 2008/2010 to deploy web application file directly in IIS or in client machine or how to place web application folder in c:\\inetpub\wwwroot folder by running setup

java.lang.IllegalStateException: Illegal access: this web application instance has been stopped already.

java.lang.IllegalStateException: Illegal access: this web application instance has been stopped already. Could not load [META-INF/services/javax.xml.bind.JAXBContext]. 解决方法:先将项目remove,然后停止服务器,到应用程序目录下将部署的应用删除,然后启动服务器,重新部署就ok了原因:暂不明确,可能是修改后有原来的残留物.

使用 Android 客户端向 Ruby on rails 构建的 Web Application 提交 HTTP GET 和 HTTP POST 请求

最近想弄个能访问 Internet 的 Android 应用,因为求快所以用了 Ruby on Rails 来提供 HTTP 资源.这方面的资料还是比较少的,所以把尝试的过程记录下来. 1 使用 Ruby on Rails 构建 Web Application 1.1 新建 Web Application rails new Test cd Test 1.2 生成 product rails generate scaffold product reference:string quantity:

What technical details should a programmer of a web application consider before making the site public?

What things should a programmer implementing the technical details of a web application consider before making the site public? If Jeff Atwood can forget about HttpOnly cookies, sitemaps, and cross-site request forgeries all in the same site, what im

使用Tomcat时出现问题：严重: Error deploying web application directory G:\MyEclipseWorkspaces\.metadata\.me_tcat7\webapps\hiber_test

今天我写了第一个jsp和Servlet,然后再myeclipse上使用tomcat来搭建服务器,登录时出现的问题. 出现问题: 严重: Error deploying web application directory G:\MyEclipseWorkspaces\.metadata\.me_tcat7\webapps\hiber_test 按照老师教的步骤一步一步来,结果打开jsp网页时还是报错了一开始我还以为是Tomcat版本问题,然后换了6和7,又用了myeclipse自带的那两个,结果