表格标签

最新推荐文章于 2022-10-23 13:46:23 发布
最新推荐文章于 2022-10-23 13:46:23 发布
阅读量153 收藏 1
点赞数
分类专栏： HTML 文章标签： 表格
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_37976731/article/details/79616486
版权

HTML <table> 标签

标签基本形式

<table>
    <tr>
        <td>
        </td>
    </tr>
</table>

表格相关元素

标签意义
<table>定义表格
<tr>定义单元格，该元素只能包含<td>或者<th>两种元素
<td>定义单元格
<caption>用于定义表格标题
<th>定义表格页眉的单元格
<tbody>定义表格主体
<thead>定义表格头
tfoot定义表格脚
  • table属性border表示边框
  • table属性bordercolor表示边框颜色，除了能使用颜色的英文表示，还通常使用RGB三原色表示法，例#FF0000
  • table属性bgcolor可以设置背景颜色（也可以被td标签所使用）。
  • table属性background可以设置表格背景图像。
  • table属性width 表示表格宽度，可以使用像素表示（px），也可以使用百分比（~%）
  • table属性height表示表格高度，可以使用像素表示（px），也可以使用百分比（~%）
  • table属性cellpadding表示表格边与内容的距离
  • table属性cellspacing表示表格边与边的距离，也就是单元格之间的距离
  • td属性colspan表示单元格跨列数目
  • td属性rowspan表示单元格跨行数目
  • td属性align定义内容在水平方向的排布，值有：left center right（此属性也可用于div或table）
  • td属性valign定义内容在竖直方向的排布，值有：bottom middle top

表格位置：

这里写图片描述

上述表格的实现：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>歌曲</title>
</head>
<body>
    <table border="1" width="50%" height="200px" align="center">
        <caption>我喜欢的歌曲</caption>
        <thead>
            <tr>
                <th>歌名</th>
                <th>作者</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>喜欢你</td>
                <td>beyond</td>
            </tr>
            <tr>
                <td>致青春</td>
                <td>王菲</td>
            </tr>
            <tr>
                <td>Season In The Sun</td>
                <td>Westlife</td>
            </tr>
            <tr>
                <td>以父之名</td>
                <td>周杰伦</td>
            </tr>
        </tbody>
        <tfoot>
            <tr><td colspan="2">现总计：5首歌曲</td></tr>
        </tfoot>
    </table>
</body>
</html>

表格标签的使用

  • 一般什么情况下使用？

    • 主要用于规则的数据显示
    • 适当的可以在表单页面中使用

  • 使用表格标签进行页面布局的缺点

    • 代码量比较大，页面浏览速度比较慢
    • 层次结构比较复杂，不易于维护和改版
    • 不利于搜素引擎查找数据

要对网页进行布局，推荐使用DIV+CSS

Example1

<!--此部分为注释，并不会出现

        1、html编辑时不是所见即所得；
        2、HTML不区分大小写
        3、段落标签<p />开启下一段，或者使用<p></p>
        4、换行标签<br />
        5、标题标签 H1——H6  依次递减
        6、缩进用TAB，不要使用空格
        6、字体标签 <font></font>
            属性size表示字体的大小，由1至7逐渐递增，
            属性color表示颜色，除了能使用颜色的英文表示，通常使用RGB三原色表示法，例#FF0000  
            属性face表示字体
            eg:<font color="red" size="5" face="楷体">HTML</font>
        7、水平线标签<hr/>
    -->
        <h1>HTML语言经常用于编写Web静态页面</h1>
        <h2>HTML语言经常用于编写Web静态页面</h2>
        <h3>HTML语言经常用于编写Web静态页面</h3>
        <h4>HTML语言经常用于编写Web静态页面</h4>
        <h5>HTML语言经常用于编写Web静态页面</h5>
        <h6>HTML语言经常用于编写Web静态页面</h6>
        <hr/>
        <font size="7" color="#00FFFF" face="楷体">HTML</font> 
        <br/>

        Java程序设计教程

        <!--段落标签-->
        <p>
            Textbook for Programming in Java
        </p>

        <br/>

        <!--表格标签<table><tr><td></td> </tr></table>
            <tr>标签标示行
            <td>标签标示单元格
            table属性border表示边框
            table属性bordercolor表示边框颜色
            table属性width 表示表格宽度，可以使用像素表示（px），也可以使用百分比（~%）
            table属性height表示表格高度，可以使用像素表示（px），也可以使用百分比（~%）
            table属性cellpadding表示表格边与内容的距离
            table属性cellspacing表示表格边与边的距离，也就是单元格之间的距离
            td属性colspan表示单元格跨列数目
            td属性rowspan表示单元格跨行数目
            td属性align定义内容在水平方向的排布：left  center  right
            td属性valign定义内容在竖直方向的排布：bottom middle  top
            &nbsp;表示空格
        -->
        <table border="1"  align="center" bordercolor="#00FFFF" cellspacing="1px" cellpadding="0px" height="250" width="60%">
            <tr>
            <td>时间\星期</td><td>星期一</td><td>星期二</td><td>星期三</td><td>星期四</td><td>星期五</td>
            </tr>
            <tr>
            <td rowspan="2" align="center">上午</td><td>数据结构</td><td>编译原理</td><td>java</td><td>数据库原理</td><td>编译原理</td>
            </tr>
            <tr>
            <td>休息</td><td>休息</td><td>操作系统</td><td>计算方法</td><td>休息</td>
            </tr>
            <tr>
            <td colspan="6">&nbsp;</td>         <!--空格跨6列-->
            </tr>
            <tr>
            <td rowspan="2" align="center">下午</td><td>休息</td><td>汇编语言</td><td>数据结构</td><td>休息</td><td>休息</td>
            </tr>
            <tr>
            <td>数据库原理</td><td>休息</td><td>计算方法</td><td>休息</td><td>操作系统</td>
            </tr>
        </table>

Example2

<!--标签
<input type="text"/> 可编辑文本域                              
<input type="password"/> 密码框                 
<input type="checkbox"/> 多选框                 
<input type="radio"/> 单选框                 
<input type="button"/> 按钮              
<input type="file"/> 文件浏览                   
<textarea cols="50" rows="4"></textarea> 文本域
<select> <option></option></select>  下拉条     
-->

<table border="1" bordercolor="blue" cellspacing="0px" cellpadding="0px" width="100%">
    <tr>
    <td align="right">用户名:</td>
    <td><input type="text" name="userName" /> </td>
    </tr>
    <tr>
    <td align="right">密&nbsp;&nbsp;码:</td>
    <td><input type="password" name="passwd"/> </td>
    </tr>
    <tr>
    <td align="right">专&nbsp;&nbsp;业:</td>
    <td>
    <select>
    <option>--请选择--</option>
    <option>软件工程</option>
    <option>计算机科学与技术</option>
    <option>通信工程</option>
    <option>电子信息</option>
    </select>
    </td>
    </tr>
    <tr>
    <td align="right">性&nbsp;&nbsp;别：</td>
    <td><input type="radio" name="gender" />男 <input type="radio" name="gender" />女</td>
    </tr>
    <tr>
    <td align="right">兴&nbsp;&nbsp;趣</td>
    <td><input type="checkbox" name="favorate" />羽毛球 <input type="checkbox" name="favorate" />篮球<input type="checkbox" name="favorate" />乒乓球</td>
    </tr>
    <tr>
    <td align="right">
    介&nbsp;&nbsp;绍:
    </td>
    <td>
    <textarea rows="3" cols="30"></textarea>
    </td>
    </tr>
    <tr>
    <td align="center">
    <input type="submit" value="提交" />
    </td>
    <td align="center">
    <input type="reset" value="重置"/>
    </td>
    </tr>
</table>

效果图
form表单.png

「已注销」
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js修改table中Td的值(定义td的单击事件)
u011425213的专栏
07-22 2139
/*  页面装载时，为每个td增加单击事件，这样，就可以不用对每个页面进行更改。  */  function ReWritable()  {  var tbmian=document.getElementById("tbmain");  for(var i=0;i {  for(var j=0;j {  　　/*  添加单击事件属性。此处不可使用setAttribute方法。
html表格标签
weixin_44992737的博客
06-06 5290
html表格标签详解
HTML表格标签
weixin_52629158的博客
10-23 2121
HTML表格标签
基本表格标签
m0_61417029的博客
07-08 2580
表格基本标签
十二、表格标签
qq_62865634的博客
07-23 5692
本文仅仅简单介绍了表格的基本语法、表头单元格标签、表格属性、表格结构标签、合并单元格。
HTML表格标签详解
实泽有之，无泽虚之
03-26 8916
本文对HTML表格标签进行详解，大体分为三部分： 第一部分，主要讲解以下标签：table、tr、td、th、caption、colgroup、col、thead、tfoot、tbody；第二部分，主要讲解以下属性：border、rowspan、colspan、cellpadding、cellspacing、width、summary；第三部分，通过HTML样例代码和运行结果进行展示。
HTML系列之表格标签
老__L的博客
10-25 5922
本文主要介绍caption、col、colgroup、table、tbody、td、tfoot、th、thead、tr标签。 table 开始标签和结束标签不能省略；表格中由行中的单元格组成；表格中没有列元素，列的个数取决于行的单元格个数；caption 开始标签和结束标签都不能省略；当 table 标签是 caption 的父元素，caption 是 figure 元素的唯一后代的时候，使用 figcaption 元素替代 caption；
表格标签介绍
dfkjds的博客
08-25 4613
表格标签 < table > < /table> （声明表格标签） < tr > < /tr > （声明行） < td > < /td > （声明单元格） < th > < /th> （表头标签） border （显示表格框线） height （表格的高度） width （表格的宽度） caption （表格标题） cellpadding（单元格内容与单元格边框之间
7.表格标签
potato123232的博客
03-11 3539
表格一般用来展示数据，有时也用来布局，表格标签中有六种常用标签，table,tr,td,th,thead和tbody,我们先看前面三个 目录 1基本用法 2表格属性 3表格结构标签 4合并单元格 4.1跨行合并(竖着) rowspan 4.2跨列合并(横着) colspan 1基本用法 table是整个的大表格，tr是一行，td是一行中的一个 我们先简单写个例子 td可以创建后不写内容，再创建时会把前面的格子空过去 这个就是我们一个简单的表格 ...
表格标签table深入了解
10-30
表格（table）是一直以来长期被大家使用的标签，直到现在还是在用，不过呢因为现在的网站重构，建议大家不要表格（table）来布局而很多朋友误以为用表格（table）就是所谓的不标准了，其实不然，表格（table）是一个...
Lesson02_01 表格标签
10-31
1. `<table></table>`：表格标签 `<table>`标签是HTML表格的根标签，用于定义一个表格。该标签有多个属性，例如： * bgcolor：设置表格的背景颜色 * border：设置表格的边框宽度 * bordercolor：设置表格的边框...
表格标签（table）深入了解
01-21
表格标签主要包含的标签有table、caption、th、tr、td、thead、tfoot、tbody、col、colgroup，针对每个的介绍如下： <table>table标签可定义表格。在 <table> 标签内部，你可以放置表格的标题、表格行、表格列、表格...
表格标签.html
09-17
表格标签
2022年HTML相关知识点表格标签.pptx
11-02
HTML相关知识点表格标签 HTML表格标签是HTML中一种基本的结构元素，用于组织和显示数据。下面是HTML表格标签的相关知识点： 表格的基本语法 在HTML中，表格的建立将运用、、、四个标签完成。 * 标签用于定义一个...
HTML内嵌框架
远方水木
03-19 8348
HTML内嵌框架 内嵌框架，也叫画中画，使用灵活，可以嵌在网页的任何一个位置。 &lt;iframe&gt;标签中的常用属性 属性 值 描述 frameborder 0，1 规定是否显示框架周围的边框 name frame_name 规定iframe的名称 scrolling yes, no, auto 规定是否在ifr...
HTML常用行级标签
远方水木
03-19 8112
HTML常用行级标签 行级标签：按行逐一显示，前后不会自动换行 文本化格式元素 符号 意义 &lt;b&gt; 定义粗体文本 &lt;i&gt; 定义斜体文本 &lt;em&gt; 定义强调文本，实际效果与斜体文本差不多 &lt;strong&gt; 定义粗体文本，左右和&lt;b&gt;基本相同 &lt;small...
form标签
远方水木
03-19 5819
HTML &lt;form&gt; 标签 form表单是用户可以填写信息并提交数据到服务器的控件 表单的基本语法 &lt;form action="表单提交地址" method="提交方法"&gt; ……文本框、按钮等表单元素…… &lt;/form&gt; 常用属性 name：指定表单的名字 action：指定表单提交后由服务器上哪个处理程序进行处理（提交地址为空或者为”...
HTML和js脚本调试
远方水木
03-21 2688
HTML和js脚本调试 在进行HTML调试和js脚本调试的方法 在Chrome中打开开发者工具，也可以使用快捷键F12来打开。 找到一个叫做“Sources”，点击它 可以在左侧侧栏的序号那些位置点击一下就设置断点，当你要执行某个函数的时候浏览器就会自动进入调试模式了。 ...
html表格标签怎么使用
最新发布
05-19
HTML表格标签用于在网页中创建表格。以下是一些常用的HTML表格标签： 1. `<table>` 标签：用于定义表格。 2. `<tr>` 标签：用于定义表格中的行。 3. `<th>` 标签：用于定义表格中的表头单元格。 4. `<td>` 标签：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值