博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
table添加正确的样式
阅读量:4962 次
发布时间:2019-06-12

本文共 954 字,大约阅读时间需要 3 分钟。

以前在做表格的时候,会在表格<table>标签中添加一些属性,来改变表格的样式,经常用到的有这几个

width 表格的宽度

border 表格边框的宽度
cellpadding  单元边沿与其内容之间的空白
cellspacing  单元格之间的空白

1、其中如果只设置了border="1"是这样的  <table border="1"> 

 我相信没有人用这么丑的表格。

2、如果设置了cellspacing="0" cellpadding="0"表格是这样的 <table border="1" cellspacing="0" cellpadding="0">

好像好看了许多

但是很少人这么写了,表格的样式应该交给css,那么如果做一个带边线的表格要怎么做呢,首先给table加border样式。会变成这样

table {    border: 1px solid #ccc;}

那么cellpadding=“0”:单元格边距等于0,其默认值为1px,其等同于css中的:{padding:0;}

cellspacing="0":单元格间距等于0,其默认值为2px,其等同于css中的:border-collapse: collapse(边框合并)

那么我们可以这样写,但这样需要加<table border="1"> 

table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border:1px solid #ccc; border-collapse: collapse;}

如果不想加<table border="1"> 需要设置table tr th和table tr td

table tr th, table tr td { border:1px solid #ccc; }    table { width: 200px; text-align: center; border-collapse: collapse;}

效果同上。这种比较推荐,毕竟结构样式分离,控制起来比较好控制

 

转载于:https://www.cnblogs.com/change-oneself/p/9707265.html

你可能感兴趣的文章
结对开发地铁
查看>>
linux(centos)设置tomcat开机启动
查看>>
操作使用的常见的问题集合 http://bbs.ecshop.com/thread-95341-1-1.html
查看>>
BZOJ 2467 生成树(组合数学)
查看>>
dedecms关键词维护里面字数多的词优先字数少的词的解决办法 相关案例演示
查看>>
eclipse和android studio的目录结构分析
查看>>
我的第一个canvas的作品:漫画对白编辑器
查看>>
NYOJ题目100 1的个数
查看>>
用字符串连接SQL语句并用EXEC执行时,出现名称 '‘不是有效的标识符
查看>>
js前端读写文件的方法(json、excel)
查看>>
HDU4670 Cube number on a tree 树分治
查看>>
php的模板原理
查看>>
Beta阶段——第6篇 Scrum 冲刺博客
查看>>
Python学习一:序列基础详解
查看>>
netty权威指南学习笔记一——NIO入门(3)NIO
查看>>
dashucoding记录2019.6.7
查看>>
IOS FMDB
查看>>
编码总结,以及对BOM的理解
查看>>
九涯的第一次
查看>>
PHP5.3的VC9、VC6、Thread Safe、Non Thread Safe的区别
查看>>