初学HTML接触table少不了，但是实际应用的地方也有。

简单说明HTML <table> 标签

定义和用法

<table> 标签定义 HTML 表格。

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

border 定义表格

<tr> 元素定义表格行，<th>元素定义表头，<td> 元素定义表格单元。

<caption>定义表格标题

colspan 单元格占多少列（跨列）

rowspan 单元格占多少行（跨行）

详细说明W3school：http://www.w3school.com.cn/tags/tag_table.asp

我这里简单做来一下表格操作，先上图。

代码一：

<!DOCTYPE html>

<html>

    <head>

        <title>

            表格

        </title>

    </head>

    <body>

    <br/>

        <table border="3" width="50%" height="90" align="center" bordercolor="black">

            <caption>专业设置表及在校人数表</caption>

            <br/>

            <tr bgcolor="silver" align="center" >

                <th>录名</th>

                <th colspan="4">专业人数</th>

            </tr>

            <tr align="center">

                <td rowspan="6">计算机科学技术系</td>

                <td bgcolor="silver" colspan="4" >计算机科学技术专业</td>

            </tr>

            <tr align="center">

                <td>04级</td>

                <td>03级</td>

                <td>02级</td>

                <td>01级</td>

            </tr>

            <tr align="center"> 

                <td>150人</td>

                <td>150人</td>

                <td>150人</td>

                <td>150人</td>

            </tr>

            <tr align="center">

                <td colspan="4" bgcolor="silver" >软件工程专业</td>

            </tr>

            <tr align="center" >

                <td>04级</td>

                <td>03级</td>

                <td>02级</td>

                <td>01级</td>

            </tr>

            <tr align="center" >

                <td>100人</td>

                <td>20人</td>

                <td>50人</td>

                <td>40人</td>

            </tr>

            <tr align="center">

                <td rowspan="3">英语系</td>

                <td colspan="4" bgcolor="silver">英语专业</td>

            </tr>

            <tr align="center">

                <td>04级</td>

                <td>03级</td>

                <td>02级</td>

                <td>01级</td>

            </tr>

            <tr align="center">

                <td>100人</td>

                <td>80人</td>

                <td>50人</td>

                <td>40人</td>

            </tr>

        </table>

    </body>

</html>

代码二：

<!DOCTYPE html>

<html>

    <head>

        <title>

        </title>

    </head>

    <body>

        <table border="3" width="80%" height="80"  bordercolor="cornflowerblue">

            <caption><h1>课程表</h1></caption>

            <br/>

                <tr align="center"> 

                    <td>项目</td>

                    <td colspan="5">上课</td>

                    <td colspan="2">休息</td>

                </tr>

                <tr align="center" bgcolor="pink">

                    <th>星期</th>

                    <th>星期一</th>

                    <th>星期二</th>

                    <th>星期三</th>

                    <th>星期四</th>

                    <th>星期五</th>

                    <th>星期六</th>

                    <th>星期日</th>

                </tr>

                <tr align="center">

                    <td rowspan="4">上午</td>

                    <td>语文</td>

                    <td>数学</td>

                    <td>英语</td>

                    <td>英语</td>

                    <td>物理</td>

                    <td>计算机</td>

                    <td rowspan="4">休息</td>

                </tr>

                <tr align="center">

                    <td>数学</td>

                    <td>数学</td>

                    <td>地理</td>

                    <td>化学</td>

                    <td>历史</td>

                    <td>计算机</td>

                </tr>

                <tr align="center">

                    <td>语文</td>

                    <td>数学</td>

                    <td>历史</td>

                    <td>计算机</td>

                    <td>物理</td>

                    <td>化学</td>

                </tr>

                <tr align="center">

                    <td>数学</td>

                    <td>数学</td>

                    <td>地理</td>

                    <td>化学</td>

                    <td>历史</td>

                    <td>计算机</td>

                </tr>

                <tr align="center">

                    <td rowspan="2">下午</td>

                    <td>数学</td>

                    <td>数学</td>

                    <td>地理</td>

                    <td>化学</td>

                    <td>历史</td>

                    <td>计算机</td>

                    <td rowspan="2">休息</td>

                </tr>

                <tr align="center">

                    <td>数学</td>

                    <td>数学</td>

                    <td>地理</td>

                    <td>化学</td>

                    <td>历史</td>

                    <td>计算机</td>

                </tr>

        </table>

    </body>

</html>

希望帮到正在接触table标签的人

HTML5表格（table）篇的更多相关文章

  1. 扩展HT for Web之HTML5表格组件的Renderer和Editor

    在HT for Web提供了一下几种常用的Editor,分别是: slider:拉条 color picker:颜色选择器 enum:枚举类型 boolean:真假编辑器 string:普通的文本编辑 ...

  2. BootStrap入门教程 (二) ：BASE CSS（排版(Typography),表格(Table),表单(Forms),按钮(Buttons)）

    上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffoldin ...

  3. jQuery 选择表格(table)里的行和列及改变简单样式

    本文只是介绍如何用jQuery语句对表格中行和列进行选择以及一些简单样式改变,希望它可以对jQuery表格处理的深层学习提供一些帮助jQuery对表格(table)的处理提供了相当强大的功能,比如说对 ...

  4. HTML5表格详细教程

    HTML5表格 文章目录 HTML5表格 5.1 定义表格 5.1.1 普通表格.列标题 5.1.2 表格标题 5.1.3 表格行分组.表格列分组 5.2 表格属性 5.2.1 单线表格.分离单元格 ...

  5. jQuery动态对表格Table进行添加或删除行以及修改列值操作

    jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本). 下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作 1.jQuery代码 <script ...

  6. html表格table设置边框

    对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解. 一般我们用表格的时候总会给它个border属性,比如:<table b ...

  7. css列表list、表格table

    列表list,无序列表ul,有序列表ol 1.列表项样式list-style-type 无列表默认为dist实心圆,有序列表默认为decimal阿拉伯数字(前面不带0) 其他无序列表常用none无样式 ...

  8. 表格(Table)隔行变色

    在ASP.NET的Repeater控件,实现隔行变色,是极简单的事情.因为它有ListItemType.Item和ListItemType.AlternatingItem模版.如果在普通的表格(Tab ...

  9. pre,html转义，abbr缩写，表格table

    <pre></pre>预定义文本标签pre(保留换行和空格) <sdds>对html转义 <abbr title="sddsdsds"&g ...

  10. 表格Table宽度设置无效的解决方法

    表格Table宽度设置无效的解决方法 bootstrap中使用table时发现不管用width赋值方式都无法改变table>td的宽度 解决方法: 设置table:table-layout:fi ...

随机推荐

  1. java笔试题大全带答案(经典11题)

    1.不通过构造函数也能创建对象吗()A. 是B. 否分析:答案:AJava创建对象的几种方式(重要):(1) 用new语句创建对象,这是最常见的创建对象的方法.(2) 运用反射手段,调用java.la ...

  2. 前后端分离进行权限管理之后端API返回菜单及权限信息（三）

    一.动态菜单API的生成 1.API #菜单信息 url(r'^menus$', views.MenuModelView.as_view({"get": "list&qu ...

  3. mysql类型转换函数convert与cast的用法,及SQL server的区别

    首先,convert函数 字符集转换 :   CONVERT(xxx  USING   gb2312) 类型转换和SQL Server一样,不过类型参数上有不同: CAST(xxx  AS   类型) ...

  4. Mybatis调用Oracle中的存储过程和function

    一.Mybatis调用存储过程 1 在数据库中创建以下的存储过程create or replace procedure pro_hello(p_user_name in varchar2,p_resu ...

  5. 二叉堆 与 PriorityQueue

    堆在存储器中的表示是数组,堆只是一个概念上的表示.堆的同一节点的左右子节点都没有规律. 堆适合优先级队列(默认排列顺序是升序排列,快速插入与删除最大/最小值). 数组与堆 堆(完全二叉树)(构造大顶堆 ...

  6. Magento站点优化方案

    Magento 是一个开源电子商务系统,尤其以扩展性高著称,但是很高的扩展性往往是牺牲了速度为代价的,虽然现在magento为速度提升做了很多工作,但是还是没能达到人们对速度的要求.既然如此还是很自然 ...

  7. 阿里云资深技术专家黄省江：让天下没有难做的SaaS

    导语:本文中,阿里云资深技术专家黄省江(花名禅笑)将聚焦“SaaS加速器——让天下没有难做的SaaS”,对伙伴来说,SaaS加速器帮助他们做好SaaS,卖好SaaS:对企业来说,SaaS加速器帮助他们 ...

  8. Delphi Base64编码_解码及ZLib压缩_解压（转）

    最近在写的程序与SOAP相关,所以用到了一些Base64编码/解码及数据压缩/解压方面的知识. 在这里来作一些总结:一.Base64编码/解码 一般用到的是Delphi自带的单元EncdDecd,当然 ...

  9. Python100天打卡

    基于tkinter模块的GUIPython默认的GUI开发模块是tkinter(在Python 3以前的版本中名为Tkinter)使用tkinter来开发GUI应用需要以下5个步骤: 导入tkinte ...

  10. mongodb副本集（选举，节点设置，读写分离设置）

    1.相对于传统主从模式的优势 传统的主从模式,需要手工指定集群中的Master.如果Master发生故障,一般都是人工介入,指定新的Master.这个过程对于应用一般不是透明的,往往伴随着应用重新修改 ...