html中如何让table显示的更好

时间:2021-06-26 23:39:47

在html文件编写中,经常使用到table来做一些表格。如何让它显示的更像一张表格?接下来为你讲解。

基本格式

<div>
<th>我的一张表格</th>
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>班级</th>
</tr>
<tr>
<td>张山</td>
<td>20</td>
<td>计算机1班</td>
</tr>
</table>
</div>

显示效果如下:

html中如何让table显示的更好

看起来显得有点挤,让他的宽度增加就是设置table的width属性。想让单元格之间是一条实线分割,设置table的cellspacing=0。想让单元格中的内容和单元格边框距离为0,设置table的cellpadding=0.想要每个单元格的高度增大一点,可以在每个<td>标签中设置height=40属性。

<div>
<th>我的二张表格</th>
<table border="1" cellspacing="0" cellpadding="0" width="400" >
<tr>
<th>姓名</th>
<th>年龄</th>
<th>班级</th>
</tr>
<tr>
<td height="40">张山</td>
<td >20</td>
<td >计算机1班</td>
</tr>
</table>
</div>

显示效果如下:

html中如何让table显示的更好

显然数据都在最左端,想要文字显示在中间,可以设置td的align属性。

<div>
<th>我的三张表格</th>
<table border="1" cellspacing="0" cellpadding="0" width="400">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>班级</th>
</tr>
<tr>
<td align="center" height="40">张山</td>
<td align="center">20</td>
<td align="center">计算机1班</td>
</tr>
</table>
</div>

显示效果如下:

html中如何让table显示的更好

html中如何让table显示的更好的更多相关文章

  1. html中使用js&plus;table 实现分页

    本文在html中利用js+table实现分页.主要思想是先对table中的所有数据隐藏,然后通过当前页面(currPageNum)来计算当前页要显示的行,并显示出来,首页.下一页.上一页.尾页都依此来 ...

  2. hibernate中&commat;Entity和&commat;Table的区别

    Java Persistence API定义了一种定义,可以将常规的普通Java对象(有时被称作POJO)映射到数据库.这些普通Java对象被称作Entity Bean.除了是用Java Persis ...

  3. Table显示滚动条

    Table显示滚动条,要先把table放到一个div中,div的长度和宽度要固定,控制overflow属性为scroll <div style="width:700px; height ...

  4. 如何让Table显示滚动条

    Table显示滚动条,要先把table放到一个div中,div的长度和宽度要固定,控制overflow属性为scroll <div style="width:700px; height ...

  5. 区别CSS中display:box;inline;none以及HTML中 &lt&semi;frame&gt&semi; 标签&lt&semi;table&gt&semi; 标签的 frame 属性

    区别display:box:display:inline:display:none三者的不同 display:block的特点是: block是Display默认的值.总是在新行上开始:该对象随后的内 ...

  6. WDA基础三:简单的INPUT选择,简单的TABLE显示

    先从基本的开始,简单的单选和TABLE显示 1.创建选择条件节点,CONTEXT页签,右键CONTEXT创建NODE,对应1:1  1:1  lead selection 2.创建结果节点,对应0:n ...

  7. WinForm中遇到Label要显示的内容太长,自动换行

    很多朋友都会在开发WinForm中遇到Label要显示的内容太长,但却不能换行的问题.这里我总结了几种方法,供大家参考. 第一种是把Label的AutoSize属性设为False,手动修改Label的 ...

  8. 网络采集软件核心技术剖析系列(6)---将任意博主的全部博文下载到SQLite数据库中并通过Webbrower显示(将之前的内容综合到一起)

    一 本系列随笔目录及本节代码下载 自己开发的豆约翰博客备份专家软件工具问世3年多以来,深受广大博客写作和阅读爱好者的喜爱.同时也不乏一些技术爱好者咨询我,这个软件里面各种实用的功能是如何实现的. 该软 ...

  9. 网络采集软件核心技术剖析系列(5)---将任意博主的全部博文下载到内存中并通过Webbrower显示(将之前的内容综合到一起)

    一 本系列随笔概览及产生的背景 自己开发的豆约翰博客备份专家软件工具问世3年多以来,深受广大博客写作和阅读爱好者的喜爱.同时也不乏一些技术爱好者咨询我,这个软件里面各种实用的功能是如何实现的. 该软件 ...

随机推荐

  1. iOS常见用户头像的圆形图片裁剪常见的几种方法

    在开发中,基本上APP的用户头像的处理都需要把用户所上传的方形图片,处理为圆形图片.在这里就总结三种常见的处理圆形图片的方法. 1.使用位图上下文 2.使用UIView的layer进行处理 3.使用r ...

  2. 【NET MVC】View

    通过阅读一些书籍,结合源代码,稍微深入的学习了Asp.Net MVC中的视图View 任何类型的响应都可以利用当前HttpResponse来响应,MVC可以通过Controller的Response属 ...

  3. WPF资源字典的使用【转】

    资源字典出现的初衷就在于可以实现多个项目之间的共享资源,资源字典只是一个简单的XAML文档,该文档除了存储希望使用的资源之外,不做任何其它的事情. 1.  创建资源字典 创建资源字典的过程比较简单,只 ...

  4. struts2 提供的校验器列表

  5. HTML笔记(四) 框架

    通过框架,可以在一个窗口显示多个页面.而所谓的框架,就是指每一份HTML文档. 框架结构标签<frameset> 定义如何将窗口分割为框架. frameset定义了一系列的行列. rows ...

  6. OpenJudge计算概论-完美立方【暂时就想到了枚举法了】

    /*===================================== 完美立方 总时间限制: 1000ms 内存限制: 65536kB 描述 a的立方 = b的立方 + c的立方 + d的立 ...

  7. Python全栈开发之 Mysql &lpar;一&rpar;

    一: 1.什么是数据库? 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库别说我们在写程序的时候创建的database就是一个数据库 2.什么是 MySQL.Oracle.SQLi ...

  8. ubuntu 学习笔记1--安装jdk

    ubuntu 版本13.10 安装jdk参考网址http://*.com/questions/14788345/how-to-install-jdk-on-ubuntulinu ...

  9. iOS-Mac远程连接控制Window【苹果电脑远程连接控制Windows电脑】

    用Mac电脑时想远程控制Windows电脑,摸索了半天搞定了 1.下载Mac远程控制安装包:http://pan.baidu.com/s/1o7ZsDQy  提取密码:r2ja 2.安装好之后打开,就 ...

  10. centos下搭建Jenkins持续集成环境&lpar;安装jenkins&rpar;

    1.安装JDK yum install -y java 2.安装jenkins 添加Jenkins库到yum库,Jenkins将从这里下载安装. 1 wget -O /etc/yum.repos.d/ ...