资讯专栏INFORMATION COLUMN

html-表格标签

JinB / 2967人阅读

摘要:表格标签可以对数据进行格式化,使数据显示更加清晰表示表格的范围表格线表格线的颜色单元格之间的距离表格的宽度表格的高度在里面设置显示方式在里面设置显示方式使用也可以实现居中和加粗代码表格的标题分析表格的写法首先定义一个表格的范

  表格标签可以对数据进行格式化,使数据显示更加清晰

    

:表示表格的范围
      - border:表格线
      - bordercolor:表格线的颜色
      - cellspacing:单元格之间的距离
      - width:表格的宽度
      - height:表格的高度

    ** 在table里面:
      - 设置显示方式 aligh:left、center、right
      ** 在tr里面:
        - 设置显示方式 aligh:left、center、right
      ** 使用th也可以实现居中和加粗

    * 代码
    

    ** 表格的标题
      

 

    *分析表格的写法
      - 首先定义一个表格的范围使用table
      - 定义一行使用tr
      - 定义一个单元格使用 td

    ** 操作技巧
      - 首先数有多少行(tr),数每行里面有多少个单元格(td)

    ** 合并单元格
      - rowspan:跨行
      - colspan:跨列

  完整代码:

<html>
    <head>
        <title>Worldtitle>
    head>
    <body>
        
        <table border="1" bordercolor="blue" cellspacing="0" align="center" width="200" height="100">
            <caption>公司职员信息表caption>
            <tr align="center">
                <td>姓名td>
                <td>性别td>
                <td>年龄td>
                <td>职位td>
            tr>
            <tr align="center">
                <td>栗子壳td>
                <td>td>
                <td>20td>
                <td>老总td>
            tr>
            <tr>
                <th>栗子米th>
                <th>th>
                <th>19th>
                <th>秘书th>
            tr>        
        table>
    body>
html>
<html>
    <head>
        <title>Worldtitle>
    head>
    <body>
        
        <table border="1" cellspacing="0" bordercolor="blue" width="200">
            <tr>
                <td colspan="3" align="center">人员信息td>
            tr>
            <tr>
                <td>岳不群td>
                <td>td>
                <td>40td>
            tr>
            <tr>
                <td>令狐冲td>
                <td>td>
                <td>25td>
            tr>
            <tr>
                <td>东方不败td>
                <td>td>
                <td>24td>
            tr>
        table>
        <hr/>
        
        <table border="1" cellspacing="0" bordercolor="blue" width="200">
            <tr>
                <td>岳不群td>
                <td>td>
                <td rowspan="3" align="center">40td>
            tr>
            <tr>
                <td>令狐冲td>
                <td>td>
            tr>
            <tr>
                <td>东方不败td>
                <td>td>
            tr>
        table>
    body>
html>

 

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/1621.html

相关文章

  • 前端入门2-HTML标签

    摘要:标签用于表示代码块。而所有行的单元格都是表格的主要内容,因此都在标签中。引入表格结构标签,是为了更好的区分出各个单元格的含义。 本篇文章已授权微信公众号 dasu_Android(大苏)独家发布 声明 本系列文章内容全部梳理自以下四个来源: 《HTML5权威指南》 《JavaScript权威指南》 MDN web docs Github:smyhvae/web 作为一个前端小白,入门跟...

    NickZhou 评论0 收藏0
  • HTML总结

    摘要:宋体是文本标记语言宋体宋体文件的扩展名一般为宋体或者宋体内的标签一般是成对出现,有开始就有结束宋体第一个标签宋体所有网页内容都是放在宋体标签内宋体标签是网页是最大的标签宋体第二个标签在宋体有两个重要的标签一HTML 是文本标记语言(Hyper Text Mark-up Language) Html文件的扩展名一般为.html或者.htm Html内的标签一般是成对出现,有开始就有结束 第一个...

    番茄西红柿 评论0 收藏0
  • 补习前端(css+html)基础-1:

    摘要:标签将表单内容的一部分打包,生成一组相关表单的字段。提示和注释注释元素是空元素,它仅包含属性。注释此元素只能存在于部分,不过它可出现任何次数。属性属性规定当前文档与被链接文档之间的关系。该标签用于组合表格的主体内容。 1.HTML 标签: 实例 组合表单中的相关元素: health information height: weight: 定义和用法 fieldset 元素...

    marek 评论0 收藏0
  • 补习前端(css+html)基础-1:

    摘要:标签将表单内容的一部分打包,生成一组相关表单的字段。提示和注释注释元素是空元素,它仅包含属性。注释此元素只能存在于部分,不过它可出现任何次数。属性属性规定当前文档与被链接文档之间的关系。该标签用于组合表格的主体内容。 1.HTML 标签: 实例 组合表单中的相关元素: health information height: weight: 定义和用法 fieldset 元素...

    douzifly 评论0 收藏0
  • 前端基础-HTML的的标签详解

    阅读目录 一、head内常用标签 二、 HTML语义化 三、 字符实体 四、 h系列标签 五、 p标签 六、 img标签 七、 a标签 八、 列表标签 九、 table标签 十、 form标签 一、 head内常用标签 1、meta相关 #1、指定字符集 #2、页面描述 #3、关键字:有助于搜索引擎SEC优化,再怎么优化也抵不过竞价排名 #4、3秒后跳转 #5、三秒刷新 ...

    番茄西红柿 评论0 收藏0
  • 初识 “HTML

    摘要:仅在属性存在时使用。规定显示图像的。表格概念具有行和列基本结构表示表格表示行表示单元格带表头的表格表头单元格由创建,元素中的文本通常呈现粗体并居中。规定用于发送表单数据的方法。规定表单的名称。 HTML 什么是HTML? ①全称:超文本标记语言②超文本:在普通的文本内容的基础上添加超链接、图片、视频等③标记语言:HTML提供一系列标签④版本:HTML 4.01 HTML声明 1.编码格...

    史占广 评论0 收藏0

发表评论

0条评论

JinB

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<