文章目录
HTML样式和表格
【1】HTML样式
【1.1】样式
- 样式：定义格式、对文档进行格式化
- 通过
<style>标签定义样式
<#HTML样式#>
<html charset="utf-8">
<head>
<style type="text/css">
h1 {color: red;}
p {color: blue;}
</style>
</head>
<body>
<h1>header</h1>
<p>paragraph</p>
</body>
</html>
【1.2】外部样式表（全局样式表）
- 定义全局可用的样式
<#外部样式#>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
（1）
rel：告诉浏览器引用的是一个样式表
（2）href：文件地址
【1.3】内部样式表（局部）
- 单个文件需要特殊的样式时，使用内部样式表
- 在
<style>标签中使用属性 type
<#内部样式#>
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
【1.4】内联样式
- 针对个别元素，（例如：某个段落、某个元素……）
- 在标签中通过属性
<style>使用
<#内联样式#>
<p style="color: red; margin-left:20px">
This is a paragraph
</p>
（1）
margin-left：左边距
【1.5】优先级说明
内联样式 > 内部样式 > 外部样式
【2】HTML表格
- 表格由
<table>标签定义 - 每个表格有若干行——由
<tr>标签定义（table row） - 每行被分割成若干单元格——由
<td>标签定义（table data）
数据单元格可以包含图片、列表、段落、表单、水平线、表格……
<#表格#>
<html>
<head>
<table border="1">
<tr>
<td>row1, cell1</td>
<td>row1, cell2</td>
</tr>
<tr>
<td>row2, cell1</td>
<td>row2, cell2</td>
</tr>
</table>
</head>
</html>
<border>属性：边框属性，显示表格边框
【2.1】表格—表头
- 表格的表头用
<th>标签定义（table head）
大多数浏览器会将表头显示为粗体居中的文本
<#表头#>
<html>
<head>
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row1, cell1</td>
<td>row1, cell2</td>
</tr>
<tr>
<td>row2, cell1</td>
<td>row2, cell2</td>
</tr>
</table>
</head>
</html>
【2.2】表格——空单元格
- 当某个单元格需要无内容时——利用空格
<#空格占位符#>
<html>
<head>
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row1, cell1</td>
<td>row1, cell2</td>
</tr>
<tr>
<td> </td>
<td>row2, cell2</td>
</tr>
</table>
</head>
</html>
【2.3】表格——标题
- 利用
<caption>标签定义表格标题
（1）一个表格只能一个标题
（2）标题会居中显示在表格之上
<#表格标题#>
<html>
<head>
<table border="1">
<caption>我的标题</caption>
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row1, cell1</td>
<td>row1, cell2</td>
</tr>
<tr>
<td> </td>
<td>row2, cell2</td>
</tr>
</table>
</head>
</html>
【2.4】表格——合并单元格
- colspan属性：横向合并单元格（column span）
- rowspan属性：纵向合并单元格（row span）
span跨度
【2.4.1】colspan横向合并单元格
<html>
<head>
<table border="1">
<tr align="center">
<td colspan="2">姓名</td>
</tr>
<tr>
<td>yzy</td>
<td>tdq</td>
</tr>
</head>
</html>
【2.4.2】rowspan纵向合并单元格
<html>
<head>
<table border="1">
<tr align="center">
<td rowspan="2">姓名</td>
<td>yzy</td>
</tr>
<tr>
<td>tdq</td>
</tr>
</head>
</html>
