html-表格标签

JinB 发布于2019-04-23 13:14 / 3092人阅读

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

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

：表示表格的范围
　　　　　　- 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 2019-04-23 13:15 评论0 收藏0
HTML总结

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

番茄西红柿 2019-04-23 13:39 评论0 收藏0
补习前端（css+html）基础-1：

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

marek 2019-08-29 15:24 评论0 收藏0
补习前端（css+html）基础-1：

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

douzifly 2019-08-02 10:26 评论0 收藏0
前端基础-HTML的的标签详解

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

番茄西红柿 2019-04-23 13:42 评论0 收藏0
初识 “HTML”

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

史占广 2019-08-01 17:53 评论0 收藏0