html5简单表格制作

基础表格

table 标签

table 标签包含要定义的表格的全部内容；
组成：thead tbody tfoot，具体如下：（如果不写这三个直接写内容，浏览器会自动将所写的东西归入到 tbody 中）；
border 设置表格线的像素；
cellspacing 设置间隔；

<body><table border="1px" cellspacing = "0">  <!--border设置表格线的像素，cellspacing设置间隔--><thead></thead>  <!--题头：用来放标题之类的东西--><tbody>          <!--正文--><!--这里来设置具体的表格--></tbody><tfoot></tfoot>  <!--脚注--></table>
</body>

现在代码运行什么都没有，因为我们还没有在 tbody 中定义表格的相关信息。

行和列

在 tbody 中

tr 标签是行；
td 标签是单元格；
th 标签是题头单元格，且单元格中的文本加粗并居中；
快捷定义法：例如定义 4 行 5 列的表格，只需在 tbody 中输入tr*4>td*5，点击回车键，就会自动生成基础表格代码，之后再具体操作；
col 标签：设置列的宽度；
colgroup 标签：分组设置列的宽度；
tr 标签中：height 设置行的高度；
td 或 th 标签中：
- colspan 设置把列合并；
- rowspan 设置把行合并；

<body><table border="1px" cellspacing="0"><thead></thead><tbody>   <!--快捷定义法：例如定义 4 行 5 列的表格，只需在 tbody 中输入 tr*4>td*5，点击回车键，就会自动生成基础表格代码--><colgroup span="6" width="100px"></colgroup>    <!--colgroup 标签：分组设置列的宽度--><colgroup span="1" width="200px"></colgroup><tr height="40px">                           <!--行，height设置行的高度--><th colspan="7">个人简历</th>              <!--th:是单元格，且单元格中的文本加粗并居中；colspan 把列合并--></tr><tr height="40px"><td>姓名</td>                              <!--td:是单元格--><td></td><td>性别</td><td></td><td>年龄</td><td></td><td rowspan="4">照片</td>                 <!--rowspan 设置把行合并--></tr><tr height="40px"><td>学历</td><td></td><td>籍贯</td><td colspan="3"></td></tr><tr height="40px"><td>电话</td><td></td><td>政治面貌</td><td colspan="3"></td></tr><tr height="40px"><td>毕业院校</td><td colspan="5"></td></tr><tr height="40px"><td>求职意向</td><td colspan="6"></td></tr></tbody><tfoot></tfoot></table>
</body>

效果如下：

表单

制作表单需要用到 form 标签

form 标签中：action 中写提交之后跳往的网址；
input 标签：标签规定用户可输入数据的输入字段，type中定义文本类型，可以是文本字段、复选框、密码字段、单选按钮、按钮等等；

<body><form action="http://www.kuokuo666.com">                        <!--action 中写提交之后跳往的网址--><table border="1px" cellspacing="0"><thead></thead><tbody><colgroup span="2" width="200px"></colgroup><colgroup span="1" width="400px"></colgroup><tr height="40px"><td rowspan="4" align="center">总体信息</td>    <!--居中--><td colspan="2"></td></tr><tr height="40px">  <td align="right">用户名：</td>                 <!--靠右--><td><input type="text" name="login" id="">      <!--input定义输入框，type中定义文本类型，name中自定义--></td></tr><tr height="40px">    <td align="right">密码：</td><td><input type="password" name="pwd" id=""></td></tr><tr height="40px">  <td colspan="2" align="center"><input type="submit" value="提交">          <!--（提交）按钮类型，value中定义按钮上的字--><input type="reset" value="重置">           <!--（重置）按钮类型，value中定义按钮上的字--></td> </tr></tbody><tfoot></tfoot></table></form>
</body>

效果如下：

html5简单表格制作相关推荐

HTML5基础学习（5）：百度云盘制作、简单表格制作
一.百度云盘制作 (1)绝对地址与相对地址绝对地址:在任何情况下,都可以找得到的地址.网页中下面图片所在的路径叫做绝对路径: <img src="http://1000phone.c ...
latex 中表格怎么指定编号_科学网—latex中简单表格制作+标题+编号+固定位置 - 江亿平的博文...
Type one: %%%%%%%%%%简单表格%%%%%%%%%% begin{tabular}{|c|c|} hline a & b \hline c & d\ hline end ...
LaTeX简单表格制作及Excel2LaTeX插件基本用法
LaTeX表格及Excel2LaTeX插件用法 % 表格也遵循'空白行换行',如果没有空白行,表格会置于原来表格的右方% usepackage{multirow} 纵向合并单元格 % usepacka ...
html表格制作应该注意什么软件,html表格制作
一.简单表格制作举个例子来说,如果今天我们要做一个3栏2列的表格,在WORD中,只要设定表格为3栏.2列就完成了,不过,在网页中做一个3栏2列的表格,可是要分成好几个步骤的: 第一个步骤,利用标签 ...
HTML-简单表格制作
HTML简单表格制作先给大家看一下我用的软件~ 这个是我下载软件的文件夹 . 这个是我下载的软件桌面的快捷方式的图片页面打开是这样的 file就是新建或者打开文件的,一般你新建一个html文件的时 ...
HTML5期末大作业：淘宝网站设计——仿2021淘宝首页(1页) 大学生网页制作教程表格布局网页模板学生HTML静态水网页设计作业成品简单网页制作代码学生商城网页作品免费设计
HTML5期末大作业:淘宝网站设计--仿2021淘宝首页(1页) 大学生网页制作教程表格布局网页模板学生HTML静态水网页设计作业成品简单网页制作代码学生商城网页作品免费设计常见网页设计作业 ...
使用matlab建立个人简历,HTML 使用表格制作简单的个人简历
复习一下HTML,用表格做一个简单的个人简历 .btbg{ text-align:center; } 个人简历姓名性别出生日期照片民族政治面貌婚姻状况现所在地籍贯学历毕业学校专 ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <! ...
canvas制作简单表格
初识canvas,绘制简单表格目的,制作一个可以点击的表格想法: 以每一个小盒子按一定大小排列组成表格,格子的线段采用从顶到底.从左到右的方式绘制整个表格的格子,点击事件以点击时的offsetXY ...
HTML简单表格的制作
每日一分享 HTML简单表格的制作代码: 表格此处编写设计编码星期星期一星期二星期三星期四星期五星期六星期日上午8:00-12:00 星期一星期二星期三星期四星期五星期 ...

html5简单表格制作

基础表格

table 标签

行和列

表单

html5简单表格制作相关推荐

最新文章

热门文章