网站首页 > 知识剖析正文

表格 table

nixiaole 2024-11-25 15:41:53 知识剖析 19 ℃

<table>标签定义HTML表格。关于table 我们需要认识它的一些内嵌标签有：

<th>，定义表标头，默认情况下标头为粗体且居中。

<tr>，定义表格的每一行。

<td>，定义表格的数据单元格。

因为是表格，我们需要每一行的单元格都是一样的数量，然后我们可以指定每个单元格的宽高。

简单小实例：

<!DOCTYPE html>
<html>
  <head>
 ?  <title>表格</title>
 ?  <style>
 ? ?  table{
 ? ? ?  /* border-collapse:collapse; */
 ? ?  }
 ? ?  td{
 ? ? ?  width: 100px;
 ? ? ?  height:50px;
 ? ? ?  text-align: center;
 ? ?  }
 ?  </style>
  </head>
 ?
  <body>
 ?  <!-- cellpadding属性设置表格边框之间和表格单元格之间的间距，cellspacing属性设置单元格中的信息四周的间距（两者都是以像素为单位）-->
 ?  <table border="1" cellpadding="0" cellspacing="0">
 ? ?  <tr>
 ? ? ?  <td>1</td>
 ? ? ?  <td>2</td>
 ? ? ?  <td>3</td>
 ? ?  </tr>
 ? ?  <tr>
 ? ? ?  <td>4</td>
 ? ? ?  <td>5</td>
 ? ? ?  <td>6</td>
 ? ?  </tr>
 ? ?  <tr>
 ? ? ?  <td>7</td>
 ? ? ?  <td>8</td>
 ? ? ?  <td>9</td>
 ? ?  </tr>
 ?  </table>
  </body>
</html>

定义表标头 <th>：th 的多少对应表格的列数

<th>第一列</th>
<th>第二列</th>
<th>第三列</th>

定义表格标题 <caption>：比如我们要给上面表格一个标题的话，我们就需要用到这个标签属性

<caption style="font-size: 20px;font-weight: bold;color: green;">数字表</caption>

动手小练习

编写一个5*5的表格
在第一个简单表格的基础上，给表格添加一个标题（设置颜色，定义字体大小，粗细等样式）

上一篇：纯干货!装修设计店铺常用代码
下一篇：一分钟学前端-02_HTML常用元素

网站首页 > 知识剖析 正文

表格 table

猜你喜欢

网站首页 > 知识剖析正文