html之表格

最新推荐文章于 2022-11-14 13:54:23 发布

wen_special

最新推荐文章于 2022-11-14 13:54:23 发布

阅读量418

点赞数 1

分类专栏： html

本文链接：https://blog.csdn.net/wen_special/article/details/53262092

版权

html 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

表格基础标记

表格标记table 行tr 单元格标记td

    <table>
    <tr>
    <td>单元格内的文字</td>
    <td>单元格内的文字</td>
    </tr>
    <tr>
    <td>单元格内的文字</td>
    <td>单元格内的文字</td>
    </tr>
    </table>

表格的高度和宽度

<table width="表格宽度" height="表格高度">

表格标题

     <caption>表格的标题</caption>

表格的表头

    <table>
    <tr>
    <th>...</th>
    ...
    </tr>

表格的边框宽度

<table border="边框宽度">

border单位像素

边框颜色

<table border="边框宽度"bordercolor>

单元格间距

<table cellspacing="间距值">

cellspacing单位为像素

单元格边距

<table cellpadding="文字与边框距离值">

单位像素

表格背景色

    <table bgcolor="背景颜色">

表格背景图片

<table backround="背景图片地址">

设计表头样式(基本语法)

 <thead>
   ...
 </thead>

在该语法中，bgcolor,align，valign的取值范围与单元格的设置方法相同．一个表头只能有一个标记

设计表主体样式(基本语法)

 <tbody bgcolor = "背景颜色"align="对齐方式">
  ...
 </tbody>

在该语法中，bgcolor,align,valign的取值范围与单元格的设置方法相同，一个表头只能有一个标记

设计表尾样式

  <tfoot bgcolor="背景颜色"align="对齐方式"valign="垂直对齐方式">
  ...
  </tfoot>

例

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>用html创建表格</title>
    </head>
    <body>
        <table width="600" height="150" border="1">
            <caption>化工网报价</caption>
            <thead bgcolor="#00ffff" align="center">
                <tr>
                    <td width="98">品名</td>
                    <td width="86">型号</td>
                    <td width="136">规格</td>
                    <td width="80">价格</td>
                </tr>
            </thead>
        <tbody bgcolor="#9999cc"align="left">
            <tr>
                <td>甲醇</td>
                <td>99.%</td>
                <td>170kg/桶</td>
                <td>2200元/吨</td>
            </tr>
            <tr>
                <td>二氯甲烷</td>
                <td>优级</td>
                <td>医药级</td>
                <td>6900元/桶</td>
            </tr>
        </tbody>
        <tfoot align="right"bgcolor="00ff00">
            <td colspan="4">特别提示:本信息由相关企业自行提供，真实性未证实，仅供参考
            </td>
        </tr>
        </tfood>
        </table>
    </body>
</html>

wen_special

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html之表格

表格基础标记表格标记table 行tr 单元格标记td <table> <tr> <td>单元格内的文字</td> <td>单元格内的文字</td> </tr> <tr> <td>单元格内的文字</td> <td>单元格内的文字</td> </tr> </table>表格的高度和宽度<table width="表格宽度"
复制链接

扫一扫