HTML表格标签

一般形式:<table>内容</table>

​
<table>
    <tr>
        <td>元素</td>
    </tr>
</table>

​

<tr>行

<td>列

注:再加一组相当于再加一行

属性 

 1.边框——border

<table border="取值">
    <tr>
        <td>元素</td>
    </tr>
</table>

取值>=0的正整数 默认值是0 没有边框

2. 宽——width;高——height

<table width="数值" height="数值">
    <tr>
        <td>元素</td>
    </tr>
</table>

 3.表格的对齐方式

align="取值"——center left right 默认的是left 居左

​
<table align="取值">
    <tr>
        <td>元素</td>
    </tr>
</table>

4.背景

bgcolor——背景颜色

background——背景图片

<table> bgcolor="颜色">
    <tr>
        <td>
            元素
        </td>
    </tr>
</table>

 5.表格的间距和边距

间距:单元格和单元格之间的距离 cellspacing 单位像素(px)

边距:单元格内元素距离单元格的距离 cellpading 单位像素(px)

<table cellpadding="10" cellspacing="10">
    <tr>
        <td>元素</td>
    </tr>
</table>

注:如果table和tr同时设置不同高度,tr的优先级高

       如果tr和td同时设置了不同的高度,哪个高取哪个

6.表格的合并

rowspan——列——垂直方向跨行

colspan——行——水平方向跨列

<table border="1">
<tr>
        <td rowspan="3">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
</tr>
<tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
</tr>
<tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
</tr>
</table>

 意思是第一列第一格向下合并三格

7.<th> 

可以替换<td>

th 元素内部的文本通常会呈现为居中的粗体文本

而 td 元素内的文本通常是左对齐的普通文本

8.<caption>

表格的标题,跟着表格一起走,和表格居中对齐

其他

 1.表格可以嵌套表格

2.元素可加入图片<img>属性

### HTML 表格标签的用法 HTML 中通过 `<table>` 标签及其子标签可以创建和格式化表格。以下是关于 HTML 表格标签的具体说明: #### 基本结构 HTML 表格的基本结构由以下几个主要部分组成: - **`<table>`**:定义整个表格区域。 - **`<tr>`**:表示表格中的每一行(Table Row)。 - **`<td>`** 或 **`<th>`**:分别表示单元格内的数据(Table Data)或表头(Table Header)。 基本结构如下所示[^1]。 ```html <table> <tr> <th>标题1</th> <th>标题2</th> </tr> <tr> <td>数据1</td> <td>数据2</td> </tr> </table> ``` --- #### 设置表格标题 为了给表格添加一个描述性的标题,可以使用 `<caption>` 标签。该标签位于 `<table>` 开始标记之后的第一行位置,并且其内容会作为表格的标题显示。当表格移动时,标题也会随之一起移动[^2]。 ```html <table> <caption>学生信息表</caption> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>张三</td> <td>18</td> </tr> </table> ``` --- #### 调整表格样式 可以通过内置属性或 CSS 来调整表格外观。例如,控制单元格之间的间距以及边框合并效果[^4]。 - 使用 `cellspacing="0"` 可以消除单元格间的空白间隙。 - 利用 CSS 的 `border-collapse: collapse;` 属性可以让相邻边框合并成一条线。 ```html <style> table { border-collapse: collapse; width: 50%; } th, td { border: 1px solid black; padding: 8px; text-align: center; } </style> <table cellspacing="0"> <tr> <th>产品名称</th> <th>价格</th> </tr> <tr> <td>苹果手机</td> <td>$999</td> </tr> </table> ``` --- #### 高级功能扩展 对于更复杂的场景,还可以借助 JavaScript 库(如 LayUI)实现动态表格渲染。LayUI 提供了一种基于 JSON 数据源的方式来自动生成表格并允许自定义配置[^5]。 下面是一个简单的控制器代码片段示例: ```javascript layui.use(&#39;table&#39;, function(){ var table = layui.table; // 渲染表格实例 table.render({ elem: &#39;#demo&#39; // 绑定到页面上的某个 DOM 元素上 ,height: 312 // 定义高度 ,url:&#39;/some/data.json&#39; // 请求远程接口获取数据 ,cols: [[ // 定义表头 {field:&#39;id&#39;, title:&#39;ID&#39;, width:80, sort:true} ,{field:&#39;username&#39;, title:&#39;用户名&#39;, width:120} ,{field:&#39;sex&#39;, title:&#39;性别&#39;, width:80, align:&#39;center&#39;} ]] ,page: true // 启用分页组件 }); }); ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值