表格初步
2020-03-11 本文已影响0人
小白_十年磨一剑
8P9wJf.png
表格
在HTML中,可以使用标签<table></table>来创建一个表格,每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>table</title>
</head>
<body>
<table border="1">
<!--
border是表格的边框属性
默认值单位为像素(px)
值为0或无此属性是没有边框
如果不定义边框属性
表格将不显示边框
有时这很有用
但是大多数时候
我们希望显示边框
-->
<caption>我是标题</caption> <!--这个标签代表的是表格的标题-->
<tr>
<!--
tr就是表格的行,td是表格的列,td是表头
每个表格由 table 标签开始
每个表格行由 tr 标签开始
每个表格数据由 td 标签开始
大多数浏览器会把表头显示为粗体居中的文本
-->
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td> </td>
<!--
是占位符
在一些浏览器中
没有内容的表格单元显示得不太好
如果某个单元格是空的（没有内容）
浏览器可能无法显示出这个单元格的边框
-->
<td>row 2, cell 2</td>
</tr>
</table>
</body>
</html>
这段代码在浏览器中显示为:
示例
背景
向表格或单元格内添加背景颜色
语法
<table bgcolor="value">
属性值
| 值 | 描述 |
|---|---|
| color_name | 规定颜色值为颜色名称的背景颜色（比如 "red"） |
| hex_number | 规定颜色值为十六进制值的背景颜色（比如 "#ff0000"） |
| rgb_number | 规定颜色值为 rgb 代码的背景颜色（比如 "rgb(255,0,0)"） |
向表格或单元格内添加背景图像
语法
background="相对路径"
插入图片时最好用相对路径
绝对路径和相对路径：
绝对路径就是无论从外部还是内部访问，都能够通过此路径找到文件夹。
而相对路径是相对于自身的，其他位置的文件和路径，只能通过内部访问。
单元格的合并
语义化标签
<tHead>,<tBody>,<tFood>
在一个
<table>中，<tBody>可以出现多次，<tHead>,<tFood>只能出现一次.
目的是使表格看起来更加规范，并不会对网页产生影响
表格属性
<cellpadding>单元格内的空间
<cellspacing>单元格之间的空间
<rowspan>合并行
<colspan>合并列
<align>左右对齐方式，值有left,center,right
<valign>上下对齐方式，值有top,middle,bottom
<col>标签
<table border="1">
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
<col>标签规定了<colgroup>元素内部的每一列的列属性,通过使用<col>标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式
