【代码笔记】Web-HTML-表格

一，效果图。

二，代码。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>html 表格</title>
</head><body><!--表格--><p>Each table starts with a table tag. Each table row starts with a tr tag. Each table data starts with a td tag.</p><h4>one column:</h4><table border="1"><tr><td>100</td></tr></table><h4>one row and theree columns:</h4><table border="1"><tr><td>100</td><td>200</td><td>300</td></tr></table><h4>tow rows and there columns:<h4><table border="1"><tr><td>100</td><td>200</td><td>300</td></tr><tr><td>400</td><td>500</td><td>600</td></tr></table><!--表格实例--><table border="1"><tr><td>row 1,cell 1</td><td>row 1,clee 2</td></tr><tr><td>row 2,cell 1</td><td>row 2,cell 2</td></tr></table><!--表格表头--><table border="1"><tr><th>Header 1</th><th>Header 2</th></tr><tr><td>row 1,cell 1</td><td>row 1,cell 2</td></tr><tr><td>row 2,cell 1</td><td>row 2,cell 2</td></tr></table>
<!--没有边框的表格-->
<h4>this table has no bordrs:</h4><table><tr><td>100</td><td>200</td><td>300</td></tr><tr><td>400</td><td>500</td><td>600</td></tr></table><h4>And this table has no borders:</h4><table border="0"><tr><td>100</td><td>200</td><td>300</td></tr><td>400</td><td>500</td><td>600</td><tr></tr></table><!--表格中的表头--><h4>Table headers:</h4><table border="1"><tr><th>Name</th><th>telephone</th><th>Telephone</th></tr><tr><td>bill</td><td>3333</td><td>9999</td></tr></table><h4>vertical headers:</h4><table border="1"><tr><th>first name:</th><td>bill</td></tr><tr><th>telephone:</th><td>777</td></tr><tr><th>telephone:</th><td>999</td></tr></table><!--带有标题的表格--><table border="1"><caption>Monthly savings</caption><tr><th>month</th><th>saving</th></tr><tr><td>Jan</td><td>$100</td></tr><tr><td>feb</td><td>$50</td></tr></table><!--跨行或跨列的表格--><h4>cell that spans tow columns:</h4><table border="1"><tr><th>name</th><th colspan="2">telephone</th></tr><tr><td>bill</td><td>4444</td><td>999</td></tr></table><h4>cell that spans two rows:</h4><table border="1"><tr><th>first name:</th><td>bill</td></tr><tr><th rowspan="2">telephone:</th><td>88888</td></tr><tr><td>888888</td></tr></table><!--表格内的标签--><table border="1"><tr><td><p>This is a paragraph</p><p>This is another paragraph</p></td><td>This cell contains a table:<table border="1"><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table></td></tr><tr><td>This cell contains a list<ul><li>apples</li><li>bananas</li><li>pineapples</li></ul></td><td>HELLO</td></tr></table><!--单元格边距--><h4>without celladding:</h4><table border="1"><tr><td>first</td><td>row</td></tr><tr><td>second</td><td>row</td></tr></table><h4>with cellpadding:</h4><table border="1" cellpadding="10"><tr><td>first</td><td>row</td></tr><tr><td>second</td><td>row</td></tr></table><!--单元格间距离--><h4>without cellspacing:</h4><table border="1"><tr><td>first</td><td>row</td></tr><tr><td>second</td><td>row</td></tr></table><h4>without cellspacing:</h4><table border="1" cellspacing="0"><tr><td>first</td><td>row</td></tr><tr><td>second</td><td>row</td></tr></table><h4>without cellspacing:</h4><table border="1" cellspacing="10"><tr><td>first</td><td>row</td></tr><tr><td>second</td><td>row</td></tr></table>
</body></html>

参考资料：《菜鸟教程》

【代码笔记】Web-HTML-表格相关推荐

学堂在线部分网课笔记---Web设计与应用
学堂在线部分网课笔记 Web设计与应用第六章敏捷的前端框架 6.2.1 bootstrap响应式布局(一) 容器非固定宽度固定宽度 Viewport viewport的作用是什么? width ...
软考高级网规考试笔记（涉及表格用图片代替_9万字左右）
作者:BSXY_19计科_陈永跃_23年7月更 BSXY_信息学院_v:CwJp0403 注:未经允许禁止转发任何内容笔记说明: 目前还只有笔记,其他资源将会在近期更新,(笔记5.5即可,不诚勿加可 ...
CSDN技术主题月----“深度学习”代码笔记专栏
from: CSDN技术主题月----"深度学习"代码笔记专栏 2016-09-13 nigelyq 技术专题 Hi,各位用户 CSDN技术主题月代码笔记专栏会每月在CODE博客为 ...
python基础学习[python编程从入门到实践读书笔记(连载三)]：django学习笔记web项目
文章目录 Django项目:学习笔记web网页项目部署参考自己部署的网站,还是小有成就感的,毕竟踩过很多坑,实战技能也有些许进步. 网站链接:http://lishizheng.herokuap ...
slickgrid 中ajax,slickgrid.js 一种高性能web数据表格组件的探讨
本文将探讨一种高性能web数据表格组件的实现,首先简单介绍slickgrid这个前人开发的组件,接着对该组件的设计和实现思路进行讨论,最后对该组件的思想进行提炼,实现基于原始思想的新组件. slick ...
Web jquery表格组件 JQGrid 的使用 - 从入门到精通开篇及索引
因为内容比较多,所以每篇讲解一些内容,最后会放出全部代码,可以参考.操作中总会遇到各式各样的问题,个人对部分问题的研究在最后一篇问题研究里.欢迎大家探讨学习. 代码都经过个人测试,但仍可能有各种未 ...
Python Text Processing with NLTK 2.0 Cookbook代码笔记
如下是<Python Text Processing with NLTK 2.0 Cookbook>一书部分章节的代码笔记. Tokenizing text into sentences ...
Kali Linux学习笔记—Web渗透（1）
Kali Linux学习笔记-WEB渗透侦察 Httrack 扫描 Nikto vega skipfish w3af Arachni OWASP_ZAP 必须掌握 Burpsuite 必须掌握实验 ...
狂神Spring Boot 员工管理系统【源码 + 笔记 + web素材】超详细整理
目录员工管理系统 1.准备工作 1.1.导入资源 1.2.编写pojo层 1.3.编写dao层 2.首页实现 2.1.引入Thymeleaf 2.2.编写MyMvcConfig 2.3.测试首页 3 ...
导入excel表格到数据库、导入excel表格到数据库代码、根据excel表格路径将数据导入到数据库、验证要导入的excel表格数据、根据路径获取MultipartFile、FileItem文件
导入excel表格到数据库.根据路径导入excel表格到数据库代码.根据excel表格路径将数据导入到数据库.验证要导入的excel表格数据.根据路径获取MultipartFile.FileItem文 ...

【代码笔记】Web-HTML-表格

【代码笔记】Web-HTML-表格相关推荐

最新文章

热门文章