HTMl-table.jpg

创建表格

表格的基本构成

表格需要由<table>行标记 tr 单元格标记 td构成

基本语法:

<table border="1">
    <tr>
        <td>第一行第一列单元格</td>
        <td>第一行第二列单元格</td>
        <td>第一行第三列单元格</td>
    </tr>
    <tr>
        <td>第二行第一列单元格</td>
        <td>第二行第二列单元格</td>
        <td>第二行第三列单元格</td>
    </tr>
    <tr>
        <td>第三行第一列单元格</td>
        <td>第三行第二列单元格</td>
        <td>第三行第三列单元格</td>
    </tr>
</table>

其中border="1"设置了表格的边框为1

html-table.png

设置表格的标题

基本语法:<caption>###</caption><table>内使用

示例:

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title>创建表格</title> 
    </head> 
    <body>
<table  border="1">
    <caption>基本信息表</caption>
    <tr>
        <td>姓名</td>
        <td>张三</td>
        <td>李四</td>
        <td>王五</td>
    </tr>
    <tr>
        <td>性别</td>
        <td>男</td>
        <td>女</td>
        <td>男</td>
    </tr>
    <tr>
        <td>手机号</td>
        <td>152000000000</td>
        <td>186000000000</td>
        <td>131000000000</td>
    </tr>
</table>
    </body> 
</html>

html-caption.png

表头

表格的表头 <th><td>的变体,其一般用于第一行或者第一列以表示这一行或者这一列的内容类别。

示例:

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title>创建表格</title> 
    </head> 
    <body>
<table  border="1">
    <caption>基本信息表</caption>
    <tr>
        <th>姓名</th>
        <td>张三</td>
        <td>李四</td>
        <td>王五</td>
    </tr>
    <tr>
        <th>性别</th>
        <td>男</td>
        <td>女</td>
        <td>男</td>
    </tr>
    <tr>
        <th>手机号</th>
        <td>152000000000</td>
        <td>186000000000</td>
        <td>131000000000</td>
    </tr>
</table>
    </body> 
</html>

html-table-th.png

表格的基本属性

表格的宽度: width 高度:height 表格的对齐方式:align

基本语法:

<table width="300" height="130" align="center" border="1">
<caption>基本信息表</caption>
    <tr>
        <th>姓名</th>
        <td>张三</td>
        <td>李四</td>
        <td>王五</td>
    </tr>
    <tr>
        <th>性别</th>
        <td>男</td>
        <td>女</td>
        <td>男</td>
    </tr>
    <tr>
        <th>手机号</th>
        <td>152000000000</td>
        <td>186000000000</td>
        <td>131000000000</td>
    </tr>
</table>

html-width-height.png

表格的边框

在上面的示例中我们会发现有一个 border的属性,只要 border="数值"中的数值不为0,在网页中才能正常显示边框

ps:border属性设置的边框只影响表格四周的边框宽度,并不会影响单元格之间边框的尺寸。虽然其数值没有特别的限制,但建议不要超过5个像素。

表格边框的颜色

基本语法:

<table  border="1" bordercolor="#c6a5cd">###<table>

边框的宽度不能为0,边框颜色使用十六进制颜色值。

示例:

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title>表格边框及颜色</title> 
    </head> 
    <body>
<table  border="1" bordercolor="#c6a5cd">
    <tr>
        <th>姓名</th>
        <td>张三</td>
        <td>李四</td>
        <td>王五</td>
    </tr>
    <tr>
        <th>性别</th>
        <td>男</td>
        <td>女</td>
        <td>男</td>
    </tr>
</table>
    </body> 
</html>

html-bordercolor.png

内框宽度

用于设置表格内部每个单元格之间的间距

基本语法:

<table  border="1" bordercolor="#c6a5cd" cellspacing="16">###<table>

html-cellspacing.png

表格内文字与边框的间距

默认情况下文字会紧贴边框的边框,这样看上去会非常拥挤。可以使用 cellpadding属性来进行控制。

基本语法:

<table  border="1" bordercolor="#c6a5cd" cellspacing="16" cellpadding="10">###<table>

html-cellpadding.png

表格的背景

背景色

表格背景色属性 bgcolor针对整个表格,其定义的颜色是可以被 行、列,单元格的背景色所覆盖。

基本语法:

<table  border="3" bordercolor="#c6a5cd" bgcolor="#ea68a2">###<table>

html-table-bgcolor.png

背景图像

除了设置颜色之外同样可以使用 `background属性设置图像,图像的地址可以是相对地址也可以是绝对地址。

基本语法:

<table  border="3" bordercolor="#c6a5cd" backgroung、d="https://joooqi.cn/usr/uploads/2021/05/1841202309.jpg">###<table>

html-background.png

表格的行属性

表格的基本属性在这里同样适用

  • 高度控制 <tr height="行的高度">
  • 边框颜色 <tr bordercolor="边框的颜色">
  • 行背景色 <tr bgcolor="背景色值">
  • 行背景图 <tr background="背景图地址">

行文字的对齐方式

行文字水平对齐方式属性 align,行文字垂直对齐方式 valign。适用于<tr>标签使用

alignvalign
left(左对齐)top(顶部对齐)
center(水平居中)middle(垂直居中)
right(右对齐)bottom(底部对齐)

单元格属性

单元格的大小

基本语法:

<td width="300" height="160">###</td>

示例:

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title>单元格属性</title> 
    </head> 
    <body>
        <table  border="1" bordercolor="#c6a5cd">
            <tr>
                <td width="300" height="160">姓名</td>
                <td>张三</td>
                <td>李四</td>
                <td>王五</td>
            </tr>
            <tr>
                <td width="300" height="160">性别</td>
                <td>男</td>
                <td>女</td>
                <td>男</td>
            </tr>
        </table>
    </body> 
</html>

html-td-width.png

水平跨度和垂直跨度

其实就是实现合并单元格,水平合并使用 colspan,垂直合并使用 rowspan,这两个属性的值都应为数字,表示合并几个单元格。

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title>单元格属性</title> 
    </head> 
    <body>
        <table  border="1" bordercolor="#c6a5cd">
            <tr>
                <td width="300" height="160">姓名</td>
                <td colspan="2">张三和李四</td>
                <td rowspan="2">王五是男的</td>
            </tr>
            <tr>
                <td width="300" height="160">性别</td>
                <td>男</td>
                <td>女</td>
            </tr>
        </table>
    </body> 
</html>

html-colspan-rowspan.png

行或列跨越在内容不能完全放于一个单元格的时候非常有用。通过跨越单元格,不需要改变单元格就可以放下更多的内容。

单元格的对齐方式、背景色等

原则上他们的使用方法和表格的基本属性、背景和行属性是相似的

基本语法:

  • 对齐方式:<td align="水平居中方式" valign="垂直居中方式">###</td>
  • 单元格的背景色:<td bgcolor="十六进制色值">###</td>
  • 单元格的边框颜色:<td bordercolor="十六进制色值">###</td>
  • 单元格的亮边框颜色:<td bordercolorlight="十六进制色值">###</td>
  • 单元格的暗边框颜色:<td bordercolordark="十六进制色值">###</td>
  • 单元格的背景图像:<td background="图像地址">###</td>

表格的结构

表格的表首标记 thead它们用于定义表格最上端表首的样式,可以设置背景颜色的基本属性。

表格的表主体标记 tbody用于统一主体表的样式。

表格的表尾标记 tfoot用于定义表尾样式。