在HTML中,使用table标签来创建一个表格 在table标签中使用tr来表示表格中的一行,有几行就有几对tr 在tr中需要使用td来创建一个单元格,有几个单元格就有几个td .................................................................................................................................... rowspan用来设置纵向的合并单元格 .................................................................................................................................... colspan横向的合并单元格 ....................................................................................................................................
表格 A1 | A2 | A3 | A4 |
B1 | B2 | B3 | B4 |
C1 | C2 | C3 |
D1 | D2 | D3 |
............................................................................................................................................................................ table和td边框之间默认有一个距离,通过border-spacing属性可以设置这个距离 ...................................................................................................................................... border-collapse可以用来设置表格的边框合并 如果设置了边框合并,则border-spacing自动失效 ............................................................................................................................................................................... 设置隔行变色 ........................................................................................................................................................................... 表格 学号 | 姓名 | 性别 | 住址 |
1 | 孙悟空 | 男 | 花果山 |
2 | 猪八戒 | 男 | 高老庄 |
3 | 沙和尚 | 男 | 流沙河 |
4 | 唐僧 | 男 | 女儿国 |
1 | 孙悟空 | 男 | 花果山 |
2 | 猪八戒 | 男 | 高老庄 |
3 | 沙和尚 | 男 | 流沙河 |
4 | 唐僧 | 男 | 女儿国 |
1 | 孙悟空 | 男 | 花果山 |
2 | 猪八戒 | 男 | 高老庄 |
3 | 沙和尚 | 男 | 流沙河 |
4 | 唐僧 | 男 | 女儿国 |
1 | 孙悟空 | 男 | 花果山 |
2 | 猪八戒 | 男 | 高老庄 |
3 | 沙和尚 | 男 | 流沙河 |
4 | 唐僧 | 男 | 女儿国 |
1 | 孙悟空 | 男 | 花果山 |
2 | 猪八戒 | 男 | 高老庄 |
3 | 沙和尚 | 男 | 流沙河 |
4 | 唐僧 | 男 | 女儿国 |
1 | 孙悟空 | 男 | 花果山 |
2 | 猪八戒 | 男 | 高老庄 |
3 | 沙和尚 | 男 | 流沙河 |
4 | 唐僧 | 男 | 女儿国 |
........................................................................................................................................................................... 有一些情况下表格是非常的长的,这时就需要将表格分为三个部分,表头,表格的主体,表格底部 在HTML中为我们提供了三个标签: 这三个标签的作用,就来区分表格的不同的部分,他们都是table的子标签,都需要直接写到table中,tr需要写在这些标签当中 如果表格中没有写tbody,浏览器会自动在表格中添加tbody 并且将所有的tr都放到tbody中,所以注意tr并不是table的子元素,而是tbody的子元素 通过table > tr 无法选中行 需要通过tbody > tr ........................................................................................................................................................................... 以前表格更多的情况实际上是用来对页面进行布局的,但是这种方式早已被CSS所淘汰了 表格的列数由td最多的那行决定 表格是可以嵌套,可以在td中在放置一个表格 ............................................................................................................................. 表格的布局