第四章:表格

 张良   2022-11-12 17:16 

为什么学习表格?


表格的优势:

结构清晰明了、展示数据详细


什么是表格?


表格,即是一种可视化交流模式,又是一种组织整理数据的手段。


如何在网页中制作表格?


表格:table-table

表格行:table row-br

单元格:table data cell-td

标题单元格:table header cell-th


如何使用表格?


表格由<table>标签来定义

每个表格均有若干行(由<tr>标签定义)

每行被分割为若干单元格(由<td>/<th>标签定义)

基本语法格式:

<table>----表格

    <tr>---表格行

        <th>标题</th>---标题单元格

    </tr>

    <tr>--表格行

        <td>数据</td>---单元格

        <td>数据</td>---单元格

    </tr>

</table>


如何美化表格?


宽度:width

高度:height

边框:border


如何使用<table>标签属性


<table>的属性用于设置整个表格的样式

语法格式:

<table width="数值" height="数值" border="数值">

    <tr>

        <td>文本</td>

    </tr>

</table>

width    表格的宽度(默认尽可能小)    数值+px/%

height    表格的高度    数值+px

border    表格边框粗细    数值+px


如何给表格添加背景颜色?


bgcolor属性,设置表格的背景色;

align属性,设置表格的水平对齐方式。

基本语法格式:

<table bgcolor="颜色值" align="水平对齐方式">

    <tr>

        <td>文本</td>

    </tr>

</table>

bgcolor    表格的背景颜色    英文单词/16进制+rgb()

align    表格的对齐方式    left/center/right


cellspacing属性设置单元格间距,默认值为2px;

cellpadding属性设置单元格边距,默认值为1px。

基本语法格式:

<table cellspacing="数值" cenllpadding="数值">

    <tr>

        <td>文本</td>

    </tr>

</table>

背景色    bgcolor

文字对齐方式    align valign

高度    height


如何使用<tr>属性?


<tr>标签的属性包括bgcolor align valign height

基本语法格式:

<table>

    <tr height="" bgcolor="" align="">

        <td>文本</td>

    </tr>

</table>

height    高度    数值+px

bgcolor    背景颜色    颜色值

align    水平对齐方式    left/center/right

valign    垂直对齐方式    top/middle/bottom

对齐方式:默认水平居中,垂直居中

top上对齐    middle居中对齐    botom下对齐


如何实现单元格美化?


<td>或<th>标签表示单元格

其属性包括:bgcolor align valign widht

基本语法格式:

<td bgcolor="" align="" valign="" widht="">内容</td>

<th bgcolor="" align="" valign="" widht="">内容</th>

widht    单元格的宽度    单位是%或像素px

bgcolor    单元格的背景颜色    颜色值

align    单元格的水平对齐方式    left/center/right

valign    单元格的垂直对齐方式    top/middle/bottom


如何实现单元格的合并?


colspan属性是单元格横向合并的属性,也称单元格水平合并

基本语法格式:

<td colspan="数值">内容</td>

rowspan属性是单元格的垂直合并属性,也称单元格多行合并。

基本语法格式:

<td rowspan="数值">内容</td>

rowspan    多行合并    数值

colspan    水平合并    数值


如何实现1像素细线边框?


*第一步:设置表格背景颜色

*第二步:设置单元格背景颜色

*第三部:设置单元格间距为1px,把边框改为0

此时细线的颜色就是表格的背景色。


内容小结:


<table>表格标签:

width    宽度

height    高度

bgcolor    背景色

align    水平对齐

border    边框

cellpadding    单元格边距

cellspancing    单元格间距


<tr>行标签

height    高度

bgcolor    背景色

align    水平对齐

valingn    垂直对齐


<td>/<th>单元格标签

width    宽度

bgcolor    背景色

align    水平对齐

valign    纯质对齐

colspan    水平合并

rowspan    垂直合并


本文地址:https://www.yinmoulun.com/post/363.html,发布在阴谋论网,欢迎分享!

评论已关闭!