6.HTML基础知识-表格

最新推荐文章于 2023-10-10 22:47:45 发布

白山茶ι

最新推荐文章于 2023-10-10 22:47:45 发布

阅读量346

点赞数 1

分类专栏： web入门教程文章标签： html web

本文链接：https://blog.csdn.net/Carol_x/article/details/102166688

版权

web入门教程专栏收录该内容

21 篇文章 0 订阅

订阅专栏

HTML制作表格的基本知识

1.表格的基本属性

<table>定义一个表格
<caption>表格标题</caption>
  <tr>第一行
    <td>第一行第一列单元格内容</td>
    <td>第一行第二列单元格内容</td>
...
  </tr>
  <tr>第二行
    <td>第二行第一列单元格内容</td>
...
  </tr>
...
</table>

属性名	含义	常用属性值
width	设置表格宽度	像素值/百分比
height	设置表格高度	像素值/百分比
border	指定边线的宽度	像素值
cellspacing	设置单元格内容与边框的空白间距	像素值

2.表格行定义及其属性
标签<tr>的常见属性

属性名	含义	常用属性值
height	设置行高度	像素值/百分比
align	设置一行内容的水平对齐方式	left,center,right
valign	设置一行内容的垂直对齐方式	top,middle,bottom
bgcolor	设置行背景颜色	#rgb,rgb(r,g,b)
background	设置行背景图像	url地址

3.表格单元格定义及其属性
标签<td>常用属性

属性名	含义	常用属性值
width	设置单元宽度	像素值/百分比
height	设置单元高度	像素值/百分比
align	设置一行内容的水平对齐方式	left,center,right
valign	设置一行内容的垂直对齐方式	top,middle,bottom
bgcolor	设置行背景颜色	#rgb,rgb(r,g,b)
background	设置行背景图像	url地址
colspan	设置单元格横跨列数（横向合并）	正整数
rowspan	设置单元格横跨行数（纵向合并）	正整数

练习做一个简单课表
在这里插入图片描述
代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格练习</title>
</head>
<body>
	<table border="1" width="80%" cellspacing="0">
		<caption>网嵌182课表</caption>
		<tr bgcolor="grey">
			<th align="center" colspan="2"><b>时间</b></th>
			<th align="center"><b>星期一</b></th>
			<th align="center"><b>星期二</b></th>
			<th align="center"><b>星期三</b></th>
			<th align="center"><b>星期四</b></th>
			<th align="center"><b>星期五</b></th>
		</tr>
		<tr>
			<td align="center" colspan="2">早晨</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td align="center" rowspan="4">上午</td>
			<td>第1节</td>
			<td rowspan="2">大学物理AII1-4,6-16(1,2)徐海英东C101</td>
			<td rowspan="2">线性代数A必修1-4,6-16(1,2)狄成宽东C201></td>
			<td rowspan="2">大学物理AII1-4,6-16(1,2)徐海英东C101</td>
			<td></td>
			<td rowspan="2">大学外语课程模块III2节/周</td>
		</tr>
		<tr>
			<td>第2节</td>
			<td></td>
		</tr>
		<tr>
			<td>第3节</td>
			<td rowspan="2">大学体育1-4,6-19(3,4)孙传晨东区操场</td>
			<td rowspan="2">数据库原理及其应用1-4,6-17(3,4)温志萍东A203</td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>第4节</td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td align="center" rowspan="4">下午</td>
			<td>第5节</td>
			<td rowspan="2">操作系统A1-4,6-13(5,6)西C202</td>
			<td rowspan="2">工程英语视听说3-4,6-18朱姝颖东A201</td>
			<td></td>
			<td rowspan="2">数据库原理及其应用1-4,6-17(3,4)温志萍东A203</td>
			<td rowspan="2">web前端开发技术1-4，6-17(5,6)刘爱华南B105</td>
		</tr>
		<tr>
			<td>第6节</td>
			<td></td>
		</tr>
		<tr>
			<td>第7节</td>
			<td rowspan="2">计算机网络1-4,6-15(7,8)南A204邓秀慧</td>
			<td rowspan="2">web前端开发技术1-4，6-17(5,6)刘爱华南B105</td>
			<td></td>
			<td rowspan="2">操作系统A1-4,6-13(5,6)西C202</td>
			<td rowspan="2">计算机网络1-4,6-15(7,8)南A204邓秀慧</td>
		</tr>
		<tr>
			<td>第8节</td>
			<td></td>
	</table>

</body>
</html>

白山茶ι

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
6.HTML基础知识-表格

HTML制作表格的基本知识1.表格的基本属性<table>定义一个表格<caption>表格标题</caption> <tr>第一行 <td>第一行第一列单元格内容</td> <td>第一行第二列单元格内容</td>... </tr> <tr>...
复制链接

扫一扫

专栏目录