首页 > 编程知识 正文

html设计一个表格,html表格制作及实例

时间:2023-05-06 16:03:14 阅读:227312 作者:595

1、简单的表格

代码:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><table border="2" width="400px" height="200px" align="center" bordercolor="red" bgcolor="#cccccc" background="../../img/bg.gif" cellspacing="10" cellpadding="0px"><tr align="right" valign="top"><td>hello</td><td>hello</td><td>hello</td></tr><tr align="center" valign="middle" bgcolor="blue"><td>hello</td><td bgcolor="yellow" valign="bottom">hello</td><td>hello</td></tr><tr valign="bottom" background="../../img/heihei.gif"><td>hello</td><td>hello</td><td>hello</td></tr></table></body></html>

案例:

2、合并单元格

代码:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><!-- table>(tr>td{hello$}*4)*4 --><table border="1" width="500px" height="300px"><tr><td colspan="4" align="center">hello1</td></tr><tr><td rowspan="3">hello1</td><td>hello2</td><td>hello3</td><td>hello4</td></tr><tr><td>hello2</td><td rowspan="2" colspan="2">hello3</td></tr><tr><td>hello2</td></tr></table></body></html>

案例:

3、高级的表格

代码:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><table border="1" width="600px" height="300px" align="center"><caption><h2>学生基本信息表</h2></caption><thead bgcolor="cyan"><th>学号</th><th>姓名</th><th>年龄</th><th>性别</th></thead><tbody bgcolor="#cccccc"><tr><td>1001</td><td>阿牛</td><td>21</td><td>男</td></tr><tr><td>1002</td><td>阿花</td><td>20</td><td>女</td></tr><tr><td>1003</td><td>张三</td><td>19</td><td>男</td></tr><tr><td>1004</td><td>李四</td><td>22</td><td>女</td></tr></tbody><tfoot bgcolor="yellow" align="center"><tr><td width="25%">总计人数</td><td colspan="3">4</td></tr></tfoot></table></body></html>

案例:

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。