html中table表格的属性是怎么使用的?其实很简单,下面我们以几个典型的属性来说明一下。
首先是colspan属性,这是合并单元格的,一般一个表格的每一行的单元格数目都是一致的,但可以使用这个属性来为任意一行合并某些单元格,下方的代码就是为第一行合并3个单元格,从而让这一行只有一个单元格的。
另一个是bgcolor属性,这是设置每一行或,每一个单元格的背景颜色的,如果要设置漂亮的表格,我们可以使用这个背景属性来让表格更有色彩。
align属性可以让我们的单元格内容进行对齐,有左对齐,居中对齐和右对齐。这个可以让文本显示更加有条理。
看下应用的效果,可以看到现在的表格显示有条有理了,灵活应用这些表格属性,可以让我们做出各式各样的表格来。
使用HTML添加表格1(基本元素)——零基础自学网页制作
表格元素详解与练习
提到表格,大家最先想到的就是EXCEL这款软件,实际上在对表格的操作上,html与EXCEL非常相似。
在展示数据,统计数据方面,表格比文字描述更具表达优势,在网页中,表格也经常被用来展示数据、计划日常安排等内容。如图所示:
今天我们就来学习一下如何向页面中添加表格元素。
首先来介绍一下表格元素中的基本标签。
NO.1:<table></table>
这个标签是书写表格的第一个标签,它本身在页面上看不出什么内容,但是它的属性可以控制表格显示的全局样式。这个标签的开始标签写在表格元素的开头,结尾标签写在表格元素的结尾。
NO.2:<caption></caption>
这个标签是表格的标题标签。
NO.3:<tr></tr>
这个标签定义表格的列标签。
NO.4:<th></th>
这个标签是列表标题标签,例如,男生、女士、姓名等。
NO.5:<td></td>
这个标签定义表格的行标签。
OK,这些基本标签就可以构建一个基础的表格元素。示例代码如下:
<table><!-- 写在表格元素的开头 --><caption>表格标题</caption><!-- 表格标题 --><tr>标题标签<th>姓名</th><!-- 标题标签 --><th>年龄</th></tr><tr><td>一列一行</td><td>一列二行</td></tr><tr><td>二列一行</td><td>二列二行</td></tr></table><!-- 写在表格元素的结尾 -->
页面效果如图所示:没有表格的外边框。
如何添加外边框呢?在<table>标签中修改border属性即可,示例代码如下:border="1"是给表格添加宽为1的边界线。
<table border = "1"><!-- border="1"是给表格添加宽为1的边界线 -->
效果如图所示:
这时,您会发现表格在页面上的尺寸非常小,可不可以按照页面尺寸来显示表格吗?当然可以,这就需要为<table>标签修改第二个属性width,示例代码如图所示:width = "100%"指的是表格宽度与平面宽度一致。
<table border = "1" width = "100%"><!-- width = "100%"指的是表格宽度与平面宽度一致 -->
效果如图所示:
ok!今天的讲解先到这里,明天我会继续为大家讲解<thead></thead>、<tfoot></tfoot>、<tbody></tbody>三个标签,以及合并单元格操作。
今天的完整代码示例如下:
<!DOCTYPE HTML> <html> <head> <title>第一个网页</title></head> <body><h1>第一个网页</h1><hr><h2>表格元素</h2><hr><table border = "1" width = "100%"> <caption>表格标题</caption><tr> <th>姓名</th><th>年龄</th></tr><tr><td>一列一行</td><td>一列二行</td></tr><tr> <td>二列一行</td><td>二列二行</td></tr></table></body> </html>
正所谓万丈高楼平地起,html技术虽然简单,但是内容相对繁琐,也是以后进一步学习网页制作的基础,希望大家动手写每一段代码,把每一步踩坚实。
喜欢的小伙伴请关注我,阅读中遇到任何问题请给我留言,如有疏漏或错误欢迎大家斧正,不胜感激!
HTML完整学习目录