上一篇博客我们讲了web页面中html脚本语言对图片的设置,这一篇博客我们来聊一聊html页面中经常见到的再普通不过的表格。这篇博客我会首先去聊一聊怎样在web页面用html标签创建表格,其次我会聊一聊对表格的行合并与列合并,然后再聊一聊在建立表格的标签中一些常见属性的使用。
1:在web页面中创建表格首先要用到<table>标签,去告诉浏览器等解析器这是一个table标签。<tr>标签显示行数;<td>标签显示列数。其中table标签中的属性border是设置整个表格的边框值。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <Center> <table border="1"> <tr> <td> A-one </td> <td> A-two </td> <td> C-Three </td> </tr> <tr> <td> B-one </td> <td> B-two </td> <td> B-Three </td> </tr> </table> </Center> </body> </html>
2:用rowspan属性合并上下单元格;用colspan属性合并左右单元格。但是在合并时注意要把合并的行或者列去除掉。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>合并左右单元格、合并上下单元格</title> </head> <body> <table border="1"> <tr> <td colspan="2">合并左右单元格</td> <td>A-3</td> </tr> <tr> <td rowspan="2">合并上下单元格</td> <td>B-2</td> <td>B-3</td> </tr> <tr> <td>C-2</td> <td>C-3</td> </tr> </table> </body> </html>
3:其他一些常用到的属性:比如align属性设置对其方式;bgcolor属性设置表格的背景颜色和边框的颜色;cellpadding与cellspacing属性设定边距。其中cellpadding属性设置表格单元格里面的内容距离格线的距离;cellspacing属性设定表格相邻单元格边线之间的距离;align属性设置对齐方式;height设置表格高;width设置表格的宽度
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格中常用属性的使用</title> </head> <body> <table border="1" align="center" height="400" width="400" cellspacing="40px" cellpadding="50px;"> <tr> <th colspan="2" align="center" bgcolor="gray">A-1</th> <th align="right" bgcolor="yellow">A-3</th> </tr> <tr bgcolor="gray"> <td rowspan="2" bgcolor="red">BBB-1111</td> <td colspan="2">BBB-2222</td> </tr> <tr> <td colspan="2" align="left">C-2</td> </tr> </table> </body> </html>
4:上面介绍的是表格中常用的知识,如果想了解更多关于表格中的属性的使用方法自己动手吧。