HTML5表格的设置

来源：互联网发布：空间如何绑定域名编辑：程序博客网时间：2024/04/30 20:34

在HTML5加入表格，有下列3个步骤：

设置表格、设置行的数目、设置列的数目；

设置表格：

<table border=”1”>...</table>: 设置了一个表格，显示表格的边框；border为设置是否显示边框，0表示不显示边框

设置行的数目：

<tr>...</tr>:放在<table>内

设置列的数目：

<td>...</td>:文字就是写入这里面

<caption>...</caption>设置表格的标题

<thead>

<tr>

</tr>

</thead>

设置列的标题，可以有多个标题；

Nowrap ：表格文字太长时，不自动换行而是增长表格的列的长度，默认是换行的；

合并左右列：

<td colspan=”2”> :合并左右两个列的格；

合并上下行：

<td rowspan=”2”>合并上下两行的表格

当表格没有内容时，单元格的边框会消失，这时输入一个全角空格或“ ”就是解决了

<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><title>表格的设置</title></head><body><table border="1"><caption>季销售量统计表</caption><thead><tr><th>季别</th><th>产品名称</th><th>价格</th><th>销售量</th></tr></thead><tbody><tr><td>第一季</td><td>电视</td><td>1800</td><td>10</td></tr><tr><td>第二季</td><td>电冰箱</td><td>1800</td><td>10</td></tr><tr><td> </td><td>左</td><td>右</td></tr><tr><td>上</td><td colspan="2" rowspan="2"> </td></tr><tr><td>下</td></tr></tbody></table></body></html>

阅读全文

0 0