草庐IT

HTML基础————table标签

憨憨BEEA 2023-04-03 原文

1.什么是table？

table是html中的表格，由tr、td、th元素组成。

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

2.可选的属性

属性描述
border定义表格的边框
cellpadding单元格内内容与单元格边的间距
cellspacing单元格与表格边框的间隔
sumaary规定表格的摘要
width规定表格的宽度

3.合并单元格

用到表格，那么无可避免的就会用到合并的单元格，例如要在表格的结尾要写总计，这时候就需要合并单元格。

合并单元格分为合并列、合并行。

rowspan 是合并列

colspan 是合并行

那么怎么实现呢

<table border="1px" cellpadding="10px">
	<tr><th>#</th><th>姓名</th><th>年龄</th></tr>
	<tr><td>1</td><td>憨憨</td><td>21</td></tr>
	<tr><td>2</td><td>哈哈</td><td>21</td></tr>
	<tr><td>3</td><td>嘿嘿</td><td>24</td></tr>
	<tr><td>4</td><td>芜湖</td><td>25</td></tr>
	<tr><td>5</td><td>乌拉</td><td>25</td></tr>
	<tr><td>总数</td><td>5</td><td> </td></tr>
</table>

 上面的代码是一个表格运行如下，我们需要把红色部分合并

 

 3.1实现单元格合并列

如果我们要合并列，那么就把要合并的第二个单元格②删掉，然后在第一个单元格①的属性中写上rowspan，并写上值。

代码如下：

    <tr><td>1</td><td>憨憨</td><td rowspan="2">21</td></tr>	
	<tr><td>2</td><td>哈哈</td></tr>

  

3.1实现单元格合并行

如果 我们要合并列，那么就把要合并的第二个单元格④删掉，然后在第一个单元格③的属性中写上colspan，并写上值。

代码如下：

    <tr><td>总数</td><td colspan="2">5</td></tr>

4.演示代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第三课table标签</title>
	</head>
	<body>
		<table border="1" cellpadding="10" cellspacing="10">
			<caption>姓名图</caption>
			<tr><th>#</th><th>姓名</th><th>年龄</th></tr>
			<tr><td>1</td><td>憨憨</td><td>21</td></tr>	
			<tr><td>2</td><td>哈哈</td><td>22</td></tr>	
		</table>
		<br />
		<table border="1" cellpadding="10">
			<tr><th>#</th><th>姓名</th><th>年龄</th></tr>
			<tr><td>1</td><td>憨憨</td><td rowspan="2">21</td></tr>	
			<tr><td>2</td><td>哈哈</td></tr>	
			<tr><td>3</td><td>嘿嘿</td><td>24</td></tr>
			<tr><td>4</td><td>芜湖</td><td rowspan="2">25</td></tr>
			<tr><td>5</td><td>乌拉</td></tr>
			<tr><td>总数</td><td colspan="2">5</td></tr>
		</table>
	</body>
</html>

mdashtablegtlttdhtml$前端

有关HTML基础————table标签的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby - 在院子里用@param 标签警告 - 2

    我试图使用yard记录一些Ruby代码，尽管我所做的正是所描述的here或here#@param[Integer]thenumberoftrials(>=0)#@param[Float]successprobabilityineachtrialdefinitialize(n,p)#initialize...end虽然我仍然得到这个奇怪的错误@paramtaghasunknownparametername:the@paramtaghasunknownparametername:success然后生成的html看起来很奇怪。我称yard为:$yarddoc-mmarkdown我做错了什么？

  3. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  4. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  5. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  6. ruby-on-rails - Prawn PDF : I need to generate nested tables - 2

    我需要一个表，其中行实际上是2行表，一个嵌套表是..我怎样才能在Prawn中做到这一点？也许我需要延期..但哪一个？ 最佳答案 现在支持子表:Prawn::Document.generate("subtable.pdf")do|pdf|subtable=pdf.make_table([["sub"],["table"]])pdf.table([[subtable,"original"]])end 关于ruby-on-rails-PrawnPDF:Ineedtogeneratenested

  7. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

    我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

  8. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  9. postman接口测试工具-基础使用教程 - 2

    1.postman介绍Postman一款非常流行的API调试工具。其实，开发人员用的更多。因为测试人员做接口测试会有更多选择，例如Jmeter、soapUI等。不过，对于开发过程中去调试接口，Postman确实足够的简单方便，而且功能强大。2.下载安装官网地址:https://www.postman.com/下载完成后双击安装吧，安装过程极其简单，无需任何操作3.使用教程这里以百度为例,工具使用简单，填写URL地址即可发送请求，在下方查看响应结果和响应状态码常用方法都有支持请求方法:getpostputdeleteGet、Post、Put与Delete的作用get：请求方法一般是用于数据查询，

  10. 软件测试基础 - 2

    Ⅰ软件测试基础一、软件测试基础理论1、软件测试的必要性所有的产品或者服务上线都需要测试2、测试的发展过程3、什么是软件测试找bug，发现缺陷4、测试的定义使用人工或自动的手段来运行或者测试某个系统的过程。目的在于检测它是否满足规定的需求。弄清预期结果和实际结果的差别。5、测试的目的以最小的人力、物力和时间找出软件中潜在的错误和缺陷6、测试的原则28原则：20%的主要功能要重点测（eg：支付宝的支付功能，其他功能都是次要的）80%的错误存在于20%的代码中7、测试标准8、测试的基本要求功能测试性能测试安全性测试兼容性测试易用性测试外观界面测试可靠性测试二、质量模型衡量一个优秀软件的维度①功能性功

随机推荐