标签定义表格的页脚(脚注或表注),2.如果不定

作者: 前端  发布:2019-08-28

2.HTML 表格,2.html表格

图片 1

1.表格代码:

<table></table> // 定义表格
<tr></tr>   //定义行
<td></td> //定义列
<th></th> // 定义标题

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

2.如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框:

<table border="1"></table>

3.表格表头,通常会显示为黑体居中的效果:

<th></th>

4.表格标题:

<table>
<caption>Welcome</caption>
</table>

5.表格的跨行和跨列:

<tr colspan="2"></tr>  //跨两行
<td rowspan="2"></td> // 跨两列

6.表格单元格内距:

<table cellspadding="0"></table>

7.表格单元格边距:

<table cellspacing="0"></table>

 

表格,2.html表格 1.表格代码: table / table // 定义表格 tr / tr //定义行 td / td //定义列 th / th // 定义标题 数据单元格可以包含文本、图片...

概述

表格由table标签来定义。每个表格均有若干行(由 tr 标签定义),每行被分割为若干单元格(由td标签定义)td即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表格由<table>标签来定义。每个表格均有若干行(由<tr> 标签定义),每行被分割为若干单元格(由<td>标签定义)。

图片 2

常用属性

  • border
    • 定义表格边框。
    • 如果不定义边框属性,表格将不显示边框。
  • cellspacing
    • 单元格外边距,单元格之间的距离
  • cellpadding
    • 单元格内边距,单元格内容与其边框之间的距离
        <!--快捷键  tr*3>td{单元格内容}*5 然后按Tab-->
        <!--快捷键  tr*3>td*5 然后按Tab-->
        <table border="10px" cellspacing="10px" cellpadding="30px">
            <tr>
                <td>a1</td>
                <td>a2</td>
                <td>a3</td>
            </tr>
            <tr>
                <td>b1</td>
                <td>b2</td>
                <td>b3</td>
            </tr>
            <tr>
                <td>c1</td>
                <td>c2</td>
                <td>c3</td>
            </tr>           
        </table>

图片 3

单元格内外边距效果图

字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

CSS表格table

其他属性(不重要)

  • width/height
    • 定义表格宽/高
    • 值可以是像素(px)也可以是父级元素的百分百(%)
  • align
    • 表格的显示位置
    • 值:left、center、right
  • frame
    • 控制表格边框最外层的四条线框
    • 属性值
      • void(默认值), 表示无边框
      • above, 仅顶部有边框
      • below,仅有底部边框
      • hsides , 表示仅有顶部边框和底部边框
      • lhs , 表示仅有左侧边框
      • rhs , 表示仅有右侧边框
      • vsides,表示仅有左右侧边框
      • box , 包含全部4个边框
      • border, 包含全部4个边框
  • rules
    • 控制是否显示以及如何显示单元格之间的分割线
    • 属性值
      • none(默认值) - 表示无分割线
      • all - 表示包括所有分割线
      • rows - 表示仅有行分割线
      • clos - 表示仅有列分割线
      • groups - 表示仅在行组和列组之间有分割线

 

表格(table)是什么?做什么用的?

标题

  • caption标签,位于table之后,tr之前
  • align属性
    • top, 标题放在表格的上部
    • bottom, 标题放在表格的下部
    • left, 标题放在表格的左部
    • right, 标题放在表格的右部

HTML 表格的组成

table:包含表格,表格的开始。

tr:表格的行

th:表格的开头

td:表格的数据

 

属性:

cellpadding:表示内容与表格之间的间隙。

cellspacing:单元格之间和单元格与边框的的间隙。

border:设置边框,颜色,边框线,大小等

align:设置内容对齐方式

 

td跨行跨列通过 rowspan 和colspan来实现

案例 如下图:

      图片 4

  代码中可以看出相关的属性设置

 

<table cellpadding="15" cellspacing="11px" border="1" width="600px" align="center">
            <caption><h3>表名称</h2></caption>
            <tr>
                <th align="left">字段名</th><th>字段名</th><th>字段名</th>
            </tr>
            <tr bgcolor="#008000">
                <td align="center">数据</td><td>数据</td><td>数据2</td>
            </tr>

            <tr>
                <td height="88">数据</td><td>数据</td><td>数据</td>
            </tr>
            <tr>
                <td>数据</td><td colspan="2">数据</td>
            </tr>
            <tr>
                <td>数据s</td><td rowspan="2" valign="bottom">数据</td><td>数据</td>
            </tr>
            <tr>
                <td>数据</td><td>数据</td>
            </tr>
            <tr>
                <td >数据</td>
                <td>
                    <table width="100%" height="100%" border="1"   >
                        <tr>
                            <th>字段名</th><th>字段名</th><th>字段名</th>
                        </tr>
                        <tr bgcolor="#008000">
                            <td>数据</th><td>数据</td><td>数据2</td>
                        </tr>
                    </table>
                </td>
                <td>数据</td>
            </tr>
        </table>

 

表格主要用于向用户呈现数据,尽量不要用于布局。

表头

  • th标签,大多数浏览器会把表头显示为粗体居中的文本
    <table border="1px" cellspacing="1px" cellpadding="10px">

        <caption align="top"><h2>课程表</h2></caption>

        <tr>
            <th></th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
        </tr>
        <tr>
            <td>上午</td>
            <td>Oracle</td>
            <td>Oracle</td>
            <td>日语</td>
            <td>Oracle</td>
            <td>Oracle</td>
        </tr>
        <tr>
            <td>下午</td>
            <td>Oracle</td>
            <td>Oracle</td>
            <td>日语</td>
            <td>Oracle</td>
            <td>日语</td>
        </tr>

    </table>

图片 5

标题和表头效果图

表格(table)的基本元素

单元格内容位置

  • 在tr或td中使用align属性(水平方向)和valign属性(垂直方向)设置内容位置

caption:元素定义表格标题;

跨行/跨列

  • colspan属性: 列合并,一行跨越多列
  • rowspan属性: 行合并,一列跨越多行
  • 如果是列合并,该行列数应该少1
    如果是行合并,该行的下一行的列数应该少1
  • 使用Dreamweaver通过可视化操作,可以快速实现行列合并的功能
    <table border="1px" cellspacing="1px" cellpadding="10px">

        <caption align="top"><h2>课程表</h2></caption>

        <tr>
            <th></th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
        </tr>
        <tr>
            <td>上午</td>
            <td colspan="2">Oracle</td>
            <td>日语</td>
            <td rowspan="2">Oracle</td>
            <td>Oracle</td>
        </tr>
        <tr>
            <td>下午</td>
            <td>Oracle</td>
            <td>Oracle</td>
            <td>日语</td>
            <td>日语</td>
        </tr>

    </table>

图片 6

跨行跨列效果图

图片 7

点滴分享 共同进步



thead:标签定义表格的表头;

tbody:标签表格主体(正文);

tfoot:标签定义表格的页脚(脚注或表注);

tr:表格的行;(tr:table row)

th:表头单元格;

td:单元格;

表格(table)的属性

(cell:单元格)

cellpadding:设置单元格边框与单元格里的内容之间的距离 ;

cellspacing:设置单元格间的距离。

表格(table)的属性

colspan:跨列;

rowspan:跨行;

border:表格边框;

border-collapse:合并边框。

表格(table)的嵌套

使用表格时注意合理嵌套,遵循标签的语义性,table下只能包含thead,tbody,tfoot,标题是在表格外面用caption标签;

thead包含tr,tr包含th;

tbody和tfoot包含tr,tr包含td;

表格里的内容要写在th或者td单元格里面,否则内容会跑到表格外面。

本文由9159.com发布于前端,转载请注明出处:标签定义表格的页脚(脚注或表注),2.如果不定

关键词: 9159.com