HTML table表格标签

概述table表格标签 用于在HTML中生成一个二维表格，用于展示相应的信息：XXX管理系统、购物车等。 一、主要元素 table标签主要元素如下表格所示 table 祖先元素，它有两个子元素，thead和tbody thead 表头，它有一个子元素，th th 表头内容 tbody 表格主题(不可省略)，有一个子元素，tr tr 行，表格一般都是多行 td 单元格 其中说到不可省略，说明有些是可以省 table表格标签

用于在HTML中生成一个二维表格，用于展示相应的信息：XXX管理系统、购物车等。

一、主要元素

table标签主要元素如下表格所示

table	祖先元素，它有两个子元素，thead和tbody
thead	表头，它有一个子元素，th
th	表头内容
tbody	表格主题(不可省略)，有一个子元素，tr
tr	行，表格一般都是多行
td	单元格

其中说到不可省略，说明有些是可以省略的哦，如caption（标题）、tfoot元素，一般都可以省略不写，也可以说用不到。

二、主要属性 1.border 添加在table起始标记中，不添加是默认为0，设置边框的粗细 <table border="5"> 2.background&bgcolor

背景颜色或图片，可以添加在table起始标记中，也可以添加到其他标签起始标记中，改变一行、一个单元格的背景颜色或图片

<td bgcolor="red">

<tr background="图片路径">

3.colspan&rowspan

和并列和合并行，一般在th和td中使用

 <th colspan="5">购物车</th> <td colspan="3" rowspan="2">合计</td> 4.cellpadding&cellspacing 单元格边距和单元格间距 添加在table起始标记中控制整体的边距和间距 <table cellpadding="10"  cellspacing="5"> 5.align

文本在单元格中的对齐方式，在列或单个单元格中使用都可以

三、代码效果

   <!-- 计算器样式 --><!-- 边框为1，后面附上无边框（=0）和粗边框（=5）效果 --><table border="1">        <thead>            <th colspan="4">计算器</th>        </thead>        <tbody>            <tr>                <td colspan="4">&nbsp;</td>            </tr>            <tr>                <td>mc</td>                <td>m+</td>                <td>m-</td>                <td>mr</td>            </tr>            <tr>                <td>C</td>                <td>/</td>                <td>*</td>                <td>delete</td>            </tr>            <tr>                <td>7</td>                <td>8</td>                <td>9</td>                <td>-</td>            </tr>            <tr>                <td>4</td>                <td>5</td>                <td>6</td>                <td>+</td>            </tr>            <tr>                <td>1</td>                <td>2</td>                <td>3</td>                <td rowspan="2">=</td>            </tr>            <tr>                <td>%</td>                <td>0</td>                <td>.</td>            </tr>        </tbody>    </table>

 

 无边框时，哦，好丑哟，

 

border="5"

 

 加入个别颜色与背景

<!-- 购物车样式 -->    <table border="5">        <caption>购物车</caption>        <thead>            <th colspan="5">购物车</th>        </thead>        <tr bgcolor="red">            <td>行号</td>            <td>产品</td>            <td>单价</td>            <td>个数</td>            <td>小计</td>        </tr>        <tr>            <td>1</td>            <td bgcolor="red">Apple</td>            <td>￥10</td>            <td>1</td>            <td>￥10</td>        </tr>        <tr>            <td>2</td>            <td>Vivo</td>            <td>￥100</td>            <td>2</td>            <td>￥200</td>        </tr>        <tr>            <td>3</td>            <td>Xm</td>            <td>￥1000</td>            <td>￥3</td>            <td>￥3000</td>        </tr>        <tr>            <td>4</td>            <td>Hw</td>            <td>10000</td>            <td>￥4</td>            <td>￥40000</td>        </tr>        <tr>            <td colspan="3" rowspan="2" background="./img/huangguan.jpg">合计</td>            <td>运费</td>            <td>￥100</td>        </tr>        <tr>            <td colspan="2">￥43310</td>        </tr>    </table>

 

 加入边距、间距，改变对齐方式

<!-- 购物车样式 -->    <table border="5" cellpadding="20" cellspacing="10">        <caption>购物车</caption>        <thead>            <th colspan="5">购物车</th>        </thead>        <tr bgcolor="red" align="right">            <td>行号</td>            <td>产品</td>            <td>单价</td>            <td>个数</td>            <td>小计</td>        </tr>        <tr align="right">            <td>1</td>            <td bgcolor="red">Apple</td>            <td>￥10</td>            <td>1</td>            <td>￥10</td>        </tr>        <tr>            <td>2</td>            <td>Vivo</td>            <td>￥100</td>            <td>2</td>            <td>￥200</td>        </tr>        <tr align="right">            <td>3</td>            <td>Xm</td>            <td>￥1000</td>            <td>￥3</td>            <td>￥3000</td>        </tr>        <tr>            <td>4</td>            <td align="right">Hw</td>            <td>10000</td>            <td>￥4</td>            <td>￥40000</td>        </tr>        <tr>            <td colspan="3" rowspan="2" background="./img/huangguan.jpg">合计</td>            <td>运费</td>            <td>￥100</td>        </tr>        <tr>            <td colspan="2">￥43310</td>        </tr>    </table>

 

 

四、总结

从上面可以看出，在添加了不同的样式过后表格的变化还是很大的，但是其实一般表格就是用来简单简洁的展示一些信息的，过于“花哨”，可能适得其反哦。

表格难点应该是关于和并列和合并行，我并没有拿来特别说，因为这个真的要多试几次才能好好理解，多练几次总是好的啦！

合并其中有一个问题不能解决，就是计算器中的空白区域，只能合并出来一行空白，代码当中写再多行合并也只有一行空白（反正我试了好多次，囧）。

总结

以上是内存溢出为你收集整理的HTML table表格标签全部内容，希望文章能够帮你解决HTML table表格标签所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。