table标签定义 HTML 表格，table 由一个或多个 tr、th 或 td 元素组成，tr 元素定义表格的行，th定义表头，td定义表格单元，即展示的内容，下面介绍下如何用HTML做一个表格
01新建一个HTML文件，命名为testTable.html
02增加table标签，数据展示以省份和省会为例，代码如下
03在代码的空白出右键，选择浏览器打开，选择默认即可
04自动跳转到浏览器，效果如下图
05下面我们为表格增加样式，增加边框等元素，代码如下
06刷新浏览器，最终效果如下
HTML中的表格由 <table>标签来定义，表格是由单元格组成的，单元格可以放入文字、图片、表格等内容。下面，我们来看看如何用HTML来制作表格吧。
代码，先用<table>标签定义一个表格，其中border表示边框，border="1"表示边框为1个像素，数值越大，边框就越粗。<table border="1">
</table>
<tr>元素表示表格中的行，比如创建两行<tr></tr>表示一行。
单元格HTML表格的单元格用<td>标签表示，如下图所示：
<td>语文</td>
表格就做好一个HTML表格，显示图如下：
总代码：
<body>
<table border="1">
<tr>
<td>语文</td>
<td>数学</td>
</tr>
<tr>
<td>英语</td>
<td>化学</td>
</tr>
特别提示表格的标签：<table>、<tr>、<td>三个标签。
但愿您也能熟练使用表格来制作您的主页。1.<table></table><table></table>标签对用来创建一个表格。它有以下属性：属性用途 <table bgcolor="">设置表格的背景色。<table border="">设置边框的宽度，若不设置此属性，则边框宽度默认为0。<table bordercolor="">设置边框的颜色。<table bordercolorlight="">设置边框明亮部分的颜色(当border的值大于等于1时才有用)。<table bordercolordark="">设置边框昏暗部分的颜色(当border的值大于等于1时才有用)。<table cellspacing="">设置表格格子之间空间的大小。<table cellpadding="">设置表格格子边框与其内部内容之间空间的大小。<table width="">设置表格的宽度，单位用绝对像素值或总宽度的百分比。 说明:以上各个属性可以结合使用。有关宽度、大小的单位用绝对像素值。而有关颜色的属性使用十六进制RGB颜色码或Html语言给定的颜色常量名(如 Silver 为银色)2.<tr></tr><td></td><tr></tr>标签对用来创建表格中的每一行。此标签对只能放在<table></table>标签对之间使用，而在此 标签对之间加入文本将是无用的，因为在<tr></tr>之间只能紧跟<td></td>标签对才是有效的语法，<td></td>标签对用来创建表格中一行中的每一个格子，此标签对也只有放在<tr></tr>标签对之间才是有效的，您想要输入的文本也只有放在<td></td>标签对中才有效(即才能够显示出来)。<table></table>、<tr></tr>和<td></td>标签对的关系如下所示：<table>最外层,创建一个表格 <tr>创建一行 <td>要输出的文本只能放在此处</td>创建一个单元格(这里总共创建了三个单元格) <td>要输出的文本只能放在此处</td><td>要输出的文本只能放在此处</td></tr></table>最外层此外，<tr>还有align和valign属性。align是水平对齐方式，取值为left(左对齐)、center(居中)、right(右对齐)；而valign是垂直对齐方式，取值为top(靠顶端对齐)、middle(居中间对齐)或bottom(靠底部对齐)。<td>具有width、colspan、rowspan和nowrap属性。width是格子的宽度，单位用绝对像素值或总宽度的百分比；colspan设置一个表格格子跨占的列数(缺省值为1)；rowspan设置一个表格格子跨占的行数(缺省值为1)；nowrap禁止表格格子内的内容自动断行。3.<th></th><th></th>标签对用来设置表格头，通常是黑体居中文字。 看一看下边的例子就明白以上标签对的用法了。 例6 表格标签的综合示例<html><head><title>表格标签的综合示例</title></head><body><table border="1" width="50%" bgcolor="#E8E8E8" cellpadding="2" bordercolor="#0000FF"bordercolorlight="#7D7DFF" bordercolordark="#0000A0"><tr><th width="33%" colspan="2" valign="bottom">意大利</th><th width="36%" colspan="2" valign="bottom">英格兰</th><th width="36%" colspan="2" valign="bottom">西班牙</th></tr><tr><td width="16%" align="center">AC米兰</td><td width="16%" align="center">佛罗伦萨</td><td width="17%" align="center">曼联</td><td width="17%" align="center">纽卡斯尔</td><td width="17%" align="center">巴塞罗那</td><td width="17%" align="center">皇家社会</td></tr><tr><td width="16%" align="center">尤文图斯</td><td width="16%" align="center">桑普多利亚</td><td width="17%" align="center">利物浦</td><td width="17%" align="center">阿申纳</td><td width="17%" align="center">皇家马德里</td><td width="17%" align="center">……</td></tr><tr><td width="16%" align="center">拉齐奥</td><td width="16%" align="center">国际米兰</td><td width="17%" align="center">切尔西</td><td width="17%" align="center">米德尔斯堡</td><td width="17%" align="center">马德里竞技</td><td width="17%" align="center">……</td></tr></table></body></html>本例在浏览器中显示的结果如下：欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）