第4天-表格
table tr td
table为表格标签，tr表示一行，td表示一行里面的某个单元格，通常用在后台管理系统数据表格的显示
<table border="1" cellspacing="0" cellpadding="0"><tr><td>学号td><td>姓名td><td>班级td><td>成绩td><td>等级td>tr><tr><td>20080795113td><td>李菲td><td>3td><td>12td><td>不及格td>tr><tr><td>20080795114td><td>张菲td><td>3td><td>82td><td>良好td>tr><tr><td>20080795114td><td>王菲td><td>3td><td>32td><td>不及格td>tr> table>表格示例
注意：在table的开始标签后面加上border cellspacing cellpadding,这种形式叫做给html标签添加属性
border表示边框
cellspacing表示单元格之间的间隙
cellpadding表示单元格内容和边框之间的距离
合并单元格
colspan设置当前单元格在水平方向上合并单元格的个数
<table border="1px" width="300px" cellspacing="0" cellpadding="0"><tr><td>姓名td><td>张山td><td>年龄td><td>20td>tr><tr><td>个人简介td><td colspan="3">td>tr><tr><td>专业技能td><td colspan="3">td>tr> table>colspan
rowspan设置当前单元格垂直方向上合并单元格的个数
<table border="1px" cellspacing="0" cellpadding="0"><tr><td>姓名td><td>张三td><td>年龄td><td>12td><td rowspan="3"><img src="img/head.jpg" />td>tr><tr><td>籍贯td><td>中国td><td>民族td><td>汉族td>tr><tr><td>出生日期td><td>1999.3.4td><td>政治面貌td><td>党员td>tr> table>rowspan
练习-个人简历
DOCTYPE html>
<html><head><meta charset="utf-8"><title>title><style>.resume{width: 792px;background-color: #f2f2f2;border: 1px solid black;}.resume .resume-title{background-color: #be1e4a;color: white;font-size: 25px;font-weight: bold;text-align: center;}.resume td{height: 53px;width: 159px;color: #666666;font-size: 14px;text-align: center;}.resume .resume-head{vertical-align: top;}.resume .resume-connect{text-align: left;}style>head><body><table class="resume" border="1px" cellspacing="0" cellpadding="0"><tr><td colspan="5" class="resume-title">个人简历td>tr><tr><td>姓名td><td>李琳琳td><td>出生年月td><td>1992.2.18td><td rowspan="5" class="resume-head"><img src="img/head.jpg">td>tr><tr><td>性别td><td>女td><td>政治面貌td><td>党员td>tr><tr><td>民族td><td>汉族td><td>籍贯td><td>四川td>tr><tr><td>学历td><td>本科td><td>毕业院校td><td>四川大学td>tr><tr><td>专业td><td>管理学td><td>毕业时间td><td>2014td>tr><tr><td>自我评价td><td colspan="4">一个乐观积极的文艺女青年td>tr><tr><td>兴趣爱好td><td colspan="4">读书、旅游、跑步、摄影td>tr><tr><td>基本技能td><td colspan="4">战略分析，英语/td>tr><tr><td rowspan="4">所修课程td><td>专业课td><td colspan="3">管理学 统计学 运筹学td>tr><tr><td>实践课td><td colspan="3">英特尔、戴尔实习td>tr><tr><td>公共课td><td colspan="3">会计学 财务管理td>tr><tr><td>选修课td><td colspan="3">演讲与口才td>tr><tr><td>联系方式td><td colspan="4" class="resume-connect">18982859985 QQ：40878286td>tr> table>body>
html> 个人简历 注意问题
DOCTYPE html>
<html><head><meta charset="UTF-8"><title>title><link rel="stylesheet" href="css/simplecss.css" /><style type="text/css">.box{width: 600px;height: 350px;border: 1px solid red;margin: 20px auto;}.table{width: 100%;}.table th, .table td{padding: 6px 12px;border: 1px solid gray;height: 50px;text-align: center;}.table th{background-color: cadetblue;color: white;}style>head><body><div class="box"><table class="table"><tr><th>编号th><th>主机名th><th>IP地址th><th>机房th>tr><tr><td>001td><td>c1.heboan.comtd><td>192.168.88.1td><td>本地机房td>tr><tr><td>002td><td>c2.heboan.comtd><td>192.168.88.2td><td>本地机房td>tr><tr><td>003td><td>c3.heboan.comtd><td>192.168.88.3td><td>本地机房td>tr>table>div>body>
html> 表格 
解决，修改.table样式
.table{width: 100%;border-collapse: collapse; /*添加此属性*/ }
转载于:https://www.cnblogs.com/sellsa/p/9088609.html
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！