第二周周记

最新推荐文章于 2024-07-28 13:05:02 发布

Michael681

最新推荐文章于 2024-07-28 13:05:02 发布

阅读量94

点赞数

本文链接：https://blog.csdn.net/Michael681/article/details/115374081

版权

第二周周记

前言
一、制作表格
二、制作区块
三、有序列表、无序列表与自定义列表
总结

前言

这篇文章将记录我的HTML第二周的学习内容，这一周我学习了制作表格等功能。

一、制作表格

表格由 table 标签来定义。每个表格均有若干行（由 tr标签定义），每行被分割为若干单元格（由 td标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

以下为例子

<table border="5">
	<tr>
		<td>第一行，第一列</td>
		<td>第一行，第二列</td>
	</tr>
	<tr>
		<td>第二行，第一列</td>
		<td>第二行，第二列</td>
	</tr>
</table>

运行结果

其中border等于的值为边框宽度，若设置为零会非常难看
表格内也可以插入图片
表格的表头使用 <th>标签进行定义，大多数浏览器会把表头显示为粗体居中的文本

二、制作区块

一种分割界面的工具

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

	<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#F0F8FF;">
<h1>标题
	</h1>
</td>
</tr>
 
<tr>
<td style="background-color:#FFE4C4;width:100px;">
<b>菜单</b><br>
1<br>
2<br>
3
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;">
写什么都行，占据了很大一块地方</td>
</tr>
 
<tr>
<td colspan="2" style="background-color:#00BFFF;text-align:center;">
the end</td>
</tr>
</table>

</body>
</html>