文章目录
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>