博客列表 >HTML表格

HTML表格

的确
的确原创
2020年02月22日 17:23:39781浏览

表格由<table>标签定义,每个表格均有若干行(有<tr>标签定义),<td>标签定义表格中的数据,数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等

实例:

<table border=”1”> 


<tr>

<td>第一行第一列</td>

<td>第一行第二列</td>

</tr>

<tr>

<td>第二行第一列</td>

<td>第二行第二列</td>

</tr>

</table>


HTML表格和边框属性

如果不定义边框属性,则表格将不显示边框,有时候很有用,但大多数时候,我们希望表格显示边框。

可以使用边框属性border来定义表格边框

HTML表格表头

表格的表头由<th>标签定义

大多数浏览器会把表头显示为粗体文本

实例:

<table border=”1”> 


<tr>

<th>第一行</th>

<td>第一行第一列</td>

<td>第一行第二列</td>

</tr>

<tr>

<th>第二行</th>

<td>第二行第一列</td>

<td>第二行第二列</td>

</tr>

</table>


跨行跨列的表格

HTML文档中,我们需要跨行或者跨列来布局表格,因此跨行可以使用colspan属性,跨列使用rowspan属性,属性值为跨行或跨列的个数

实例:

<h4>跨两列表格演示</h4>


<table border=”1”> 


<tr>

<th>第一行</th>

<td>第一行第一列</td>

<td colspan="2">第一行第二列</td>

</tr>

<tr>

<th>第二行</th>

<td>第二行第一列</td>

<td>第二行第二列</td>

<td>第二行第三列</td>

</tr>

</table>

<h4>跨两行表格演示</h4>

<table border=”1”>

<tr>

<td rowspan="2">第一行</td>

<td>第一行第一列</td>

<td>第一行第二列</td>

</tr>

<tr>

<td>第二行第一列</td>

<td>第二行第二列</td>

</tr>

</table>



 


HTML表格边框与距离

HTML表格边框由cellpadding属性来定义表格边框,表格距离可以用cellspacing属性来定义

实例:

<h4>没有单元格边距:</h4> 


<table border="1">

<tr>

  <td>1</td>

  <td>2</td>

</tr>  

<tr>

  <td>1</td>

  <td>2</td>

</tr>

</table>

<h4>有单元格边距:</h4>

<table border="1"

cellpadding="10">

<tr>

  <td>1</td>

  <td>2</td>

</tr>  

<tr>

  <td>1</td>

  <td>2</td>

</tr>

</table>

<h4>无单元格距离</h4>

<table border="1">

<tr>

  <td>1</td>

  <td>2</td>

</tr>  

<tr>

  <td>1</td>

  <td>2</td>

</tr>

</table>

<h4>有单元格距离</h4>

<table border="1" cellspacing="10">

<tr>

  <td>1</td>

  <td>2</td>

</tr>  

<tr>

  <td>1</td>

  <td>2</td>

</tr>

</table>


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议