web 0基础第六节 表格标签
在没 设置边框时 在形式上其实是可以看成列表的 但是表格的多样性要比列表多
在后期结合css中 的伪类选择器 可以实现类似于购物网站的效果.
表格标签基础
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格标签</title>
<!--
1.表格的格式
table:标志当前为一个表格
tr：行 (先确定有多少行 再确定列数 列数是套在行中的)
th：表格头 会变成粗体字
td：列数 竖 (这两个本质上没啥区别就是 上面呈现出来的是粗体
还有一个区别是 表格头的文字默认在表格的中间位置)
2.表格的常用属性：
（这个属性是加在table里面的）
>.块级元素初始所占的位置宽度为整个屏幕但高度为元素内容所占位置
边框： border = 1px 像素
这个设置是表格最外边边框的宽度 但是同时也会让表格内生成单元格 单元格的宽度默认是1px
如:
对齐方式： align = “center/top/bootom/left/right" (用于调整表格的位置)
居中/ 顶部 /底部 /左边 /右边/
边框和单元之间及单元格之间的距离： cellspacing=20px (了解即可)
常规列 单元格中文字到单元格边框的距离： cellpadding=100px (了解即可)
设置表格的背景颜色 bgcolor="red"（在标签的行和列中是改变整行 或者一个单元格的背景颜色）
设置表格的背景图片（没有提示，地址需要复制 网络和本地的都可以 background="E:\web\codedaima\01.html\1.4多媒体标签\jy.webp "(了解即可)
-->
<!-- 在td中 可以单独修改单元格的高 宽 -->
</head>
<body>
<table
border="1px"
width="1000px"
height="800"
align="center"
cellspacing="50px"
cellpadding="10px"
bgcolor="red"
background="E:\web\codedaima\01.html\1.4多媒体标签\jy.webp
<tr bgcolor="black">
<th bgcolor="blue">姓名</th>
<th>身高</th>
<th>体重</th>
</tr>
<tr>
<th>yaowei</th>
<th>170</th>
<th>130</th>
</tr>
<tr>
<td>xvhaoyu</td>
<td>180</td>
<td>200</td>
</tr>
<tr>
<td>xvjie</td>
<td>182</td>
<td>120</td>
</tr>
</table>
</body>
</html>
<!-- 表格中设置表格内的背景颜色 要在color之前加bg 即:bgcolor
好像 使用 bgcolor调整颜色的 只有这儿和之前那个 其他大多数都是background-color
但目前这个结论还不确定-->
上面代码的结果:
表格头体尾(了解)
这个关于 头体尾 的章节 是为了明确表格的结构 但是在实际使用时 并不怎么用
因为要记的东西很多 重点挑重点的记 这个略作了解即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格头体尾</title>
<!--
1.表格头 thead
2.表格主体 tbody
3.表格尾部 tfoot (这三个主要是用来理清整个表格的结构)
-->
</head>
<body>
<table border="1px">
<!-- 表格划分-头 -->
<thead>
<tr>
<th>序号</th>
<th>username</th>
<th>password</th>
</tr>
</thead>
<!-- 表格划分-体 -->
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<!-- 表格划分-尾 -->
<tfoot>
<td>0062</td>
<td>wjy</td>
<td>04</td>
</tfoot>
</table>
</body>
</html>
上面代码的结果:
表格的嵌套
就是表格的符合运用 把其中的表格看作一个单元格中的内容就行 边框不会变
单元格大小可能会改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格的嵌套</title>
<!-- <table 套 table> -->
<!-- 嵌套表格需要有完整的表格形式 -->
</head>
<body>
<table border="1px" width="200px" height="200px" align="center" >
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>
<table border="1px" width="50px" height="50px" align="center" >
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>
</body>
</html>
表格的合并 (重要)
在处理不规则表格时 采取的方式
像这样的表格 每一行 的列数不一定完全相同 这个时候就需要 跨行或跨列来写出这个表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格的合并 (重要)</title>
<!--
表格的合并主要用于做布局，早期的布局是用表格去处理的
后期主要是在（CSS中 进行拓展研究）
1.跨行 rowspan
这个跨行是指的上下行与行之间的跨越 并不是在行内的跨越
2.跨列 colspan （同理）
-->
<!--在使用跨行或跨列时 首先的是确定起点 再确定要跨几个格子 这几个格子是从起点开始数
使用一下这个命令就知道我说的是什么意思了 -->
<!-- 在寻找原来格子是时候 不管删没删，都是从原来的格子去看目标格子 -->
</head>
<body>
<!-- 绘制 -->
<table width="800px" height="600px" align="center">
<!-- 这里的长宽中 根据实际情况可以使用百分百 在CSS中会主要使用-->
<tr>
<td bgcolor="black" colspan="3"></td>
<td></td>
<!-- <td></td> -->
<!-- <td></td> -->
</tr>
<tr>
<td bgcolor="red"></td>
<td></td>
<td bgcolor="pink" rowspan="2" colspan="2"></td>
<!-- <td></td> -->
</tr>
<tr>
<td></td>
<td bgcolor="red "></td>
<!-- <td></td>
<td></td> -->
</tr>
<tr>
<td bgcolor="blue" colspan="4"></td>
<!-- <td></td> -->
<!-- <td></td>
<td></td> -->
</tr>
</table>
</body>
</html>