HTML表格和div

    技术2023-11-29  109

    三、HTML表格与div应用**(由于<>显示不出来,我用《》代替了)**

    1.创建表格:表格由 《table》 来定义,行用 《tr》 定义,列用 《td》 定义

    ①创建一个简单的表格 表格缺个边框,添加一个border属性: ②完善表格:

    《catpital》 定义表格标题

    《th》 定义表头,表头通常用于列名

    表格其他属性:(使用与border类似)

    表格还可以设置宽度width和高度height以及背景颜色bgcolor

    《cellspacing》 设置单元格与单元格之间的距离(默认为2px)

    《cellpadding》 设置文字与单元格之间的距离(默认为1px)

    ③单元格跨行和跨列 colspan(合并行) rowspan(合并列)

    2.div设置:可使用多个div将网页中的任何元素布局到网页中的任何位置 语法: 《div style=“样式设计”》《div》《/div》《/div》 div布局: table布局: 同样的效果,div比table更灵活,但要根据不同场景使用不同的布局,它们之间的优缺点

    ①table布局 优点: 1.理解简单; 2.不同的浏览器看到的效果一般相同

    缺点: 1.显示样式和数据绑定在一起 2.布局灵活度不高 3.一个页面可能会有大量的table元素,冗余度高 4.增加带宽 5.搜索引擎不喜欢这样的布局

    ② div布局:

    优点: 1.符合W3C标准 2.搜索引擎更加友好 3.样式调整更方便,内容和样式的分离,使页面和样式的调整变得更方便 4.节省带宽,代码冗余度低 5.表现和结构分离,在团队开发中更容易分工合作而减少相互关联性

    3.挑战:绘制课程表 源码:

    Processed: 0.025, SQL: 9