HTML表格的基本元素使用

HTML表格基础操作

    • 最基本的表格 tr,td,th
    • 用于定义表头数据与单元数据关联的scope属性
    • 用thead、tbody和tfoot元素来定义表格
    • 单元格跨越多行或多列的表格colgroup,rowgroup

最基本的表格 tr,td,th

在HTML表中,一个表格<table>由行<tr>组成,每一行由单元格组成,单元格有标题单元格<th>和数据单元格<td>

<body>
    <table width="400">
        
        <caption>通讯录caption>
        
        <tr>
            <th scope="col">姓名th>
            <th scope="col">电话th>
            <th scope="col">备注th>
        tr>
        <tr>
            <td>李雯td>
            <td>18012311234td>
            <td>家人td>
        tr>
        <tr>
            <td>王谦td>
            <td>17812311234td>
            <td>同事td>
        tr>
        <tr>
            <td>周佳td>
            <td>17413511234td>
            <td>高中同学td>
        tr>
    table>
body>

效果如下

通讯录
姓名 电话 备注
李雯 18012311234 家人
王谦 17812311234 同事
周佳 17413511234 高中同学

1.<caption>元素用于设置表格的标题;
2.数据第一行<tr>元素中,使用<th>元素指定了表头。本例中有三列信息,所以包含了三个<th>元素;
3.设置了<th>元素的属性scope的值为col

用于定义表头数据与单元数据关联的scope属性

scope属性用于定义表头数据与单元数据关联的方法。

其他的一些值含义如下

含义
col 单元格是列的表头
row 规定单元格是行的表头
colgroup 单元格是列组的表头
rowgroup 单元格是行组的表头

列组和行组的概念在单元格跨越多行或多列的表格 中。

用thead、tbody和tfoot元素来定义表格

<body>
    <table width="400">
        <caption>运动会跑步成绩caption>
        <thead>
             
            <tr>
                <th scope="col">长度th>
                <th scope="col">李雯th>
                <th scope="col">王谦th>
                <th scope="col">周佳th>
            tr>
        thead>
        <tbody>
            
            <tr>
                <th scope="row">100米th>
                <td>14std>
                <td>16std>
                <td>13std>
            tr>
            <tr>
                <th scope="row">200米th>
                <td>26std>
                <td>23std>
                <td>25std>
            tr>
            <tr>
                <th scope="row">400米th>
                <td>70std>
                <td>73std>
                <td>69std>
            tr>
        tbody>
        <tfoot>
            
            <tr>
                <th scope="row">总用时th>
                <td>110std>
                <td>112std>
                <td>107std>
            tr>
        tfoot>
    table>

效果如下

运动会跑步成绩
长度 李雯 王谦 周佳
100米 14s 16s 13s
200米 26s 23s 25s
400米 70s 73s 69s
总用时 110s 112s 107s

顾名思义,<thead>元素标记表格第6行到第10行为头部;<tbody> 元素包围了第15行到第32行的所有数据行;最后,<tfoot>元素标记表格的尾部。

此例中,将列值的总和行作为表格的尾部。通常建议大家使用这三种元素来定义表格,因为这样做表格的总体结构更为清晰。

单元格跨越多行或多列的表格colgroup,rowgroup

实现在HTML表格里跨越多行或者多列。
可以设定colspanrowspan 属性让 <th> 或 <td>单元格跨越多行或多列。

含义
col 单元格是列的表头
row 规定单元格是行的表头
colgroup 单元格是列组的表头
rowgroup 单元格是行组的表头

代码如下:

<body>
    <table>
        <caption>彩排安排caption>
        <thead>
            
            <tr>
                <th scope="rowgroup">时间th>
                <th scope="col">周一th>
                <th scope="col">周二th>
                <th scope="col">周三th>
            tr>
        thead>
        <tbody>
            
            <tr>
                <th scope="row">上午8点th>
                <td>开场舞td>
                <td colspan="2">歌曲串烧td>
            tr>
            <tr>
                <th scope="row">上午9点th>
                <td>小品td>
                <td>相声td>
                <td rowspan="3">大型魔术td>
            tr>
            <tr>
                <th scope="row">上午10点th>
                <td>杂艺表演td>
                <td>乐队歌曲td>
            tr>
        tbody>
    table>
body>
彩排安排
时间 周一 周二 周三 周四
上午8点 开场舞 歌曲串烧 斗牛舞
上午9点 小品 相声 大型魔术 小品
上午10点 杂艺表演 乐队歌曲 京剧

当把rowspan与colspan都改为1时

	 <td colspan="1">歌曲串烧td>  
	 <td rowspan="1">大型魔术td>

可以得到

彩排安排
时间 周一 周二 周三 周四
上午8点 开场舞 歌曲串烧 斗牛舞
上午9点 小品 相声 大型魔术 小品
上午10点 杂艺表演 乐队歌曲 京剧
``

可以看到colspan对行造成了影响,他是把“斗牛舞”向后挤了一格,而rowspan对列造成了影响,占用了京剧的位置,由于“上午10点”这一行的scope元素设置为row,所以将京剧是沿行向后移动了一格。

在此例中,表格头部第7行,scope="rowgroup"指定了该单元格是行组的表头。表格中,第3行的第3列和第4列为合并单元格,我们设置第18行colspan=“2”,表示该单元格跨越两列;同理,第24行设置rowspan="2"表示该单元格跨越两行。

所以,
要设置单元格跨越多行,只需设置属性rowspan=“n”
设置单元格跨越多列,只需设置属性colspan=“n”
n是单元格要跨越的行数或列数。

你可能感兴趣的:(html5,html)