网站建设yuanmus,婺源网站建设,wordpress柒比贰,房地产网站建设提案【零基础入门前端系列】—表格#xff08;五#xff09;
一、表格
表格在数据展示方面非常简单#xff0c;并且表现优秀#xff0c;通过与CSS的结合#xff0c;可以让数据变得更加美观和整齐。
单元格的特点#xff1a;同行等高、同列等宽。 表格的基本语法#xff1…【零基础入门前端系列】—表格五
一、表格
表格在数据展示方面非常简单并且表现优秀通过与CSS的结合可以让数据变得更加美观和整齐。
单元格的特点同行等高、同列等宽。 表格的基本语法 表格的一些常用标签 table的属性
border设置表格的边框默认没有边框align设置表格的水平对齐方式默认left取值centerrightwidth设置表格的宽度height设置表格的高度cellpadding设置内容距离边框的距离cellspacing:设置单元格之间的距离默认1px 当取值为0变成一条线bgcolor:设置背景颜色background:设置背景图片图片的优先级大于背景颜色bordercolor设置边框颜色
练习 设置一个三行三列的表格 table cellpadding50 cellspacing0 border1trtd三行三列的表格/tdtd三行三列的表格/tdtd三行三列的表格/td/trtrtd三行三列的表格/tdtd三行三列的表格/tdtd三行三列的表格/td/trtrtd三行三列的表格/tdtd三行三列的表格/tdtd三行三列的表格/td/tr/table练习二 table border1 aligncenter width500caption aligncenterb同学通讯录/b/captiontr bgcolorpinkth姓名/thth性别/thth电话/thth colspan2兴趣爱好/th/trtr aligncentertd王明/tdtd男/tdtd123456/tdtd打球/tdtd唱歌/td/trtr aligncentertd张三/tdtd男/tdtd123789/tdtd跳舞/tdtd篮球/td/trtr height25td/tdtd/tdtd/tdtd/tdtd/td/tr/table 练习三 table border1 cellspacing0 cellpadding0 width500 aligncentercaption aligncenter列车时刻表/captiontr aligncentertd站名/tdtd到站时间/tdtd开车时间/td/trtr aligncentertd北京/tdtd10:30/tdtd10:50/td/trtr aligncentertd上海/tdtd11:20/tdtd11:40/td/tr/table 二、tr的属性 三、td的属性
colspan:水平合并写在合并开始的单元格上取值为数字。删除的个数合并的个数-1rowspan:垂直合并写在合并开始的单元格上取值为数字。删除的个数合并的个数-1 练习
table border1 width200 height200 cellspacing0 cellpadding1 aligncentercaption aligncenter学生信息表/captiontr aligncenterth colspan3 学生基本信息/thth colspan3成绩/th/trtr aligncenterth姓名/thth性别/thth专业/thth colspan2课程/thth分数/th/trtr aligncentertd1/tdtd1/tdtd rowspan2计算机/tdtd rowspan3 colspan2C /tdtd1/td/trtr aligncentertd2/tdtd2/tdtd2/td/trtr aligncentertd4/tdtd4/tdtd4/tdtd4/td/trtr aligncentertd3/tdtd3/tdtd3/tdtd colspan23/tdtd3/td/tr/table
