table border=1什么意思(HTML-Table表格1 209)

table表格一种早期十分流行的网页布局方式,现在基本都是div+css的布局方式,表格一般由tr(行)td(列)标签组成

表格的常用属性:1)border:表示表格边框线2)cellpadding:单元格内容和内边框之间的距离3)cellspacing:表示单元格之间的间距4)bgcolor:背景颜色5)width:宽度6)height:高度 等等

表格

没有设置表格width与height属性,表格宽高暂时由单元格的内容的宽高决定,其他暂不考虑

想要消除单元格间距与内容与单元格内边框的间距设置属性cellspacing,cellpadding为"0"

<!DOCTYPE html> <html> <head> <title>表格</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> </head> <body> <table border="1px" cellspacing="0" cellpadding="10"> <tr> <td>一</td> <td>二</td> <td>三</td> </tr> <tr> <td>C#</td> <td>Asp.net</td> <td>MVC</td> </tr> <tr> <td>HTML</td> <td>JavaScript</td> <td>JQuery</td> </tr> </table> </body> </html>

tr常用属性

align:单元格内容的水平对齐方式,属性值:1)left2左侧)right右侧3)center中间

valign:单元格内容的垂直对齐方式,属性值1)top上边2)bottom下边3)middle中间

rowspan与colspan:将单元格进行行与行或者列与列的合并

这些属性以后都会写在css样式表中;制作显示一个对齐方式与行或列的合并的表格

<!DOCTYPE html> <html> <head> <title>表格</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> </head> <body> <table border="1" cellspacing="0" cellpadding="0" width="500" height="300"> <tr> <td colspan="3" align="center">课程表</td><!--合并三行--> </tr> <tr align="center"><!--单元格内容居中显示--> <td>星期一</td> <td>星期二</td> <td>星期三</td> </tr> <tr align="center"> <td>HTML</td> <td rowspan="2">.NET</td><!--合并两列--> <td>JavaScript</td> </tr> <tr align="center"> <td>CSS</td> <td>JQuery</td> </tr> </table> </body> </html>

显示效果

表格中设置的属性虽然会继承,但是子标签单独设置了属性,就会覆盖父标签的属性;比如tr

设置align="center",此tr中的子标签td单独设置了align="left",最终效果是此td内容居左显示

tableborder

您可以还会对下面的文章感兴趣

使用微信扫描二维码后

点击右上角发送给好友