1.什么是table表格
在HTML中我们用< table >标签来定义表格,它和Excel表格类似,都包括行、列、单元格、表头等,但是在功能方面HTML的表格远不如Excel强大。
2.table的常用属性
- margin:主要设置表格的外边框
- padding:设置内边距
- border:设置表格的边框
- width:设置表格的宽度
- height:设置表格的高度
- bgcolor:设置背景颜色
- background:背景图片
- border-collapse:合并边框
- tr:行
- th/td:单元格
3.怎么制作一个table表格
(1)制作一个table表格,我们需要确定表格的行列数,比如,我们要制作一个三行四列的表格,那么就是三行,每行四个单元格,我们可以运用快捷写法(tr * 3>td * 4)直接回车键会自动生成一个三行四列的表格,如下代码:
<table><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>
</table>
(2)tr的属性:
- border:边框(粗细、颜色等直接在border后面加“-”加属性即可)
- align:水平对齐
- vlign:垂直对齐
- bgcolor:背景色
(3)th/td的属性
- width:单元格的宽度
- height:单元格的高度
- border:单元格的边框
- align:水平对齐
- vlign:垂直对齐
- bgcolor:背景色
- background:背景图片
- colspan:跨列(水平合并)
- rowspan:跨行(垂直合并)
4.用table制作一份简单的个人简历
<style>/* 自己定义的类名,设置宽度和文本对齐方式 */.bigtable {width: 1100px;text-align: center;}/* 设置宽度和边框 */.smalltable {width: 100%;border: none;}table {/* 合并边框 */border-collapse: collapse;/* 边框颜色 */border-color: black;/* 边框宽度 */border-width: 1px;/* 设置边框样式是实线 */border-style: solid;}/* 设置行高 */tr {height: 75px;}/* 设置单元格的样式 */td {border-color: black;border-width: 1px;border-style: solid;width: 220px;}th {border-color: black;border-width: 1px;border-style: solid;width: 220px;background-color: rgb(210, 230, 243);}/* 设置简历图片的尺寸 */img {width: 220px;height: 290px;}/* 设置caption的字体大小和字体粗细 */caption {font-weight: 800px;font-size: 30px;}/* 设置这个类的文本对齐方式为左对齐 */.geshi {text-align: left;}.endu-td {/* 内边距为零 */padding: 0;}.td-01 {/* 无左边框 */border-left: none;}.td-02 {/* 无上边框 */border-top: none;}.td-03 {/* 无右边框 */border-right: none;}.td-04 {/* 无下边框 */border-bottom: none;}</style><table class="bigtable"><caption>个人简历</caption><tbody><!-- tr*8>td*5 8行5列的表格 --><tr><th>求职意向</th><td colspan="4">会计</td></tr><tr><th>姓名</th><td>小可爱</td><th>出生年月</th><td>2020.11.11</td><td rowspan="4"><img src="./imges/简历.PNG" alt=""></td></tr><tr><th>性别</th><td>女</td><th>政治面貌</th><td>共青团员</td></tr><tr><th>籍贯</th><td>北京</td><th>学历</tdh <td>本科</td></tr><tr><th>邮箱</th><td>11111111111</td><th>联系电话</th><td>66666</td></tr><!-- 地址 --><tr><th>地址</th><td colspan="4">北京市海淀区</td></tr><tr><th>教育经历</th><td colspan="4" class="endu-td"><table class="smalltable"><tr><td class="td-01 td-02">起止日期</td><td class="td-02">学校</td><td class="td-02 td-03">专业</td></tr><tr><td class="td-01">2011.9-2016.6</td><td>北京财经专修学院</td><td class="td-03">会计</td></tr><tr><td class="td-01">2009.-2011.6</td><td>北京中学</td><td class="td-03"></td></tr><tr><td class="td-01 td04">2003.92009.6</td><td class="td-04">北京小学</td><td class="td-03 td-04"></td></tr></table></td></tr><!-- 主修课程 --><tr><th>主修课程</th><td colspan="4" class="geshi">高数、概率论、线性代数、管理学、网页设计、java、c语言</td></tr><tr><th>实习经历</th><td colspan="4" class="geshi">2020.9-2021.11 goole公司 财务 负责申报、发票等,处理相关财务问题</td></tr><tr><th>荣誉证书</th><td colspan="4" class="geshi">国家一等奖学金 注册会计师</td></tr><tr><th>校园经历</th><td colspan="4" class="geshi">2011.9 xxx校园大使</td></tr><tr><th>自我评价</th><td colspan="4" class="geshi">有责任心、抗压能力强</td></tr></tbody></table></center>
</body>
展示效果: