表格标签-表格基本结构

是小鹿呀
285 阅读6分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

第1关：网页表格的基本概念

相关知识

表格的结构

在基本表格结构中，表格标题、项目表头和数据资料构成了表格基本结构三个要素。 例如下图所示的表格中，表格标题为“通讯录”，表格第一行单元格中的内容基本不变，称作项目表头，表格第二行后单元格的内容通常会动态改变，称作数据资料。

基本表格

表格的基本标签

HTML表格由table标签以及一个或多个tr、th或td标签组成：

  • table标签：定义一个表格
  • caption标签：定义表格标题，嵌套在<table></table>中
  • tr标签：定义表格中的一行，嵌套在<table></table>中
  • th标签：定义表格中的表头单元格，嵌套在<tr></tr>中
  • td标签：定义表格中的数据单元格，嵌套在<tr></tr>中

表格标签的基本属性

table标签的基本属性

table标签的基本属性如下图所示： table的属性

tr标签的基本属性

tr标签的基本属性如下图所示： tr标签属性

th和td标签的基本属性

th和td标签的基本属性如下图所示： th和td标签属性

通关知识

1、定义表格的项目表头的HTML标签是（D）。
A、<table>
B、<tr>
C、<td>
D、<th>
​
2、下列选项中，用于设置表格背景颜色的属性是（B）。
A、background
B、bgcolor
C、bordercolor
D、backgroundcolor
​
3、要使表格的行高为18px，以下方法中，正确的是（D）
A、<table height="18px">...</table>
B、<th height="18px">...</th>
C、<tr height="18px">...</tr>
D、<td height="18px">...</td>
​
4、下列选项中，用于设置表格标题的标签是（D）
A、<title>...</title>
B、<h1>...</h1>
C、<tags>...</tags>
D、<caption>...</caption>
​
5、下列设置单元格中文本对齐方式的选项中，正确的是（B）
A、<th align="center" valign="center">...</th>
B、<th align="center" valign="middle">...</th>
C、<th align="middle" valign="center">...</th>
D、<th align="middle" valign="middle">...</th>
​

第2关：创建简单的表格

相关知识

表格的结构及对应的标签

一个基本的表格是由行和每行中的单元格组成的，一般要包含表格标题、项目标题和数据资料三个要素。

例如下图所示的表格

基本表格

对应的代码为：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>    
    <table border="5px">
        <caption>通讯录</caption>
        <tr>
            <th>姓名</th>
            <th>QQ</th>
            <th>电话</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>123456</td>
            <td>13511112222</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>654321</td>
            <td>13611112222</td>
        </tr>
    </table>
</body>
</html>

表格标签的属性

显然上面的表格很不美观，我们可以尝试为表格添加背景色，并调整表格的宽度和单元格的宽度。 示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <table border="5px" bgcolor="00ffff" width="300">
        <caption>通讯录</caption>
        <tr>
            <td width=100>姓名</td>
            <td width=100>QQ</td>
            <td width=100>电话</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>123456</td>
            <td>13511112222</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>654321</td>
            <td>13611112222</td>
        </tr>
    </table>
</body>
</html>

实现的效果如下图所示：

表格效果

当然，这个表格效果还不是很完美，你可以做的更好，是吧？！

编程要求

根据提示，在右侧编辑器中的Begin - End区域内补充代码，具体要求是：

  1. 在<body></body>之间创建一个表格，表格要求两行，每行都包含两个单元格，第一行的单元格是项目表头，第二行是数据单元格。

  2. 为表格添加如下图所示的背景图

    表格背景 该图的URL为：www.educoder.net/api/attachm… 3.表格的边框线设置为4px,总宽度200，每个单元格宽100 实现的效果图如下：

表格效果2

通关代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <title>创建表格</title>
 </head>
 <body>
   <!-- ********* Begin ******* -->
  <table border="4px" width="200" background="https://www.educoder.net/api/attachments/1208912">
    <caption>成绩表</caption>
      <tr>
        <th width="100">姓名</th>
        <th width="100">成绩</th>
      </tr>
      <tr>
        <td width="100">张三</td>
        <td width="100">90</td>
      </tr>
  </table>
   <!-- ********* End ********* -->
 </body> 
</html>

第3关：表格行样式的设置

相关知识

tr标签

tr标签用于定义表格的一个行。可由以下属性设置一行单元格的样式：

height

tr标签中的height属性设置行高，属性取值为具体行高的数值。

align

tr标签中的align属性设置行内单元格中文本的水平对齐方式，属性取值可以为left、center、right。

valign

tr标签中的valign属性设置行内单元格中文本的垂直对齐方式，属性取值可以为top、middle、bottom。

bgcolor

tr标签中的bgcolor属性设置行内单元格的背景颜色，属性取值可以为颜色单词或颜色代码。

background

tr标签中的background属性设置行背景图像，属性取值为背景图像的路径。

编程要求

根据提示，在右侧编辑器中的Begin - End区域内补充代码，用于设置表格第一行的样式，具体要求是：

  1. 该行的行高为40。
  2. 该行单元格内容的水平和垂直对齐方式都为居中
  3. 该行的颜色代码设置为00ffff

通关代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>表格行样式的设置</title>
</head>
<body>
    <table border="4px" background="https://www.educoder.net/api/attachments/1208912" width="200">
       <caption>成绩表</caption>
       <!-- ********* Begin ********* -->
        <tr height="40" align="center" valign="middle" bgcolor="00ffff">
       <!-- ********* End ********* -->
            <th width="100">姓名</td>
            <th width="100">成绩</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>90</td>
        </tr>
    </table>
    
</body>
</html>

第4关：表格中单元格样式的设置

相关知识

表格中的单元格样式

表格中单元格的样式分为单元格的整体样式设置和某个单元格样式的设置。

单元格整体样式

单元格的整体样式主要涉及单元格之间的距离和单元格中内容的内边距。可以在table标签内通过cellspacing和cellpadding属性来来设置。

cellspacing

cellspacing属性用于设置单元格之间的间隙，取值为某一数值。

cellpadding

cellpadding属性用于设置单元格中的文本与单元格边框之间的间隙，也称为内边距，取值为某一数值。

某个单元格的样式

可在对应的th或td标签中设置单元格的属性。

width

th或td标签中的width属性设置单元格的宽度，属性取值为具体宽度值。

height

th或td标签中的height属性设置单元格的高，属性取值为具体行高度值。

align

th或td标签中的align属性设置单元格中文本的水平对齐方式，属性取值可以为left、center、right。

valign

th或td标签中的valign属性设置单元格中文本的垂直对齐方式，属性取值可以为top、middle、bottom。

bgcolor

th或td标签中的bgcolor属性设置单元格的背景颜色，属性取值可以为颜色单词或颜色代码。

background

th或td标签中的background属性设置单元格的背景图像，属性取值为背景图像的路径。

编程要求

根据提示，在右侧编辑器中的Begin - End区域内补充代码，用于设置表格中单元格的样式，具体要求是：

  1. 该Begin1 - End1区域内添加table标签，设置表格边框线的粗细为4px，单元格之间的间隙为0，单元格内文本的内边距为8，表格总宽度200。
  2. Begin2 - End2区域内添加两个数据单元格标签，第一个数据单元格标签中设置单元格的宽度为120，单元格内的文本为“张三”；第二个数据单元格标签中设置其文本的水平对齐方式为居中，单元格内的文本为“90”。

通关代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>表格单元格样式的设置</title>
</head>
<body>
    <!-- ********* Begin1 ********* -->
    <table border="4px" cellspacing="0" cellpadding="8" width="200">
    <!-- ********* End1 ********* -->
       <caption>成绩表</caption>
        <tr height=40 align=center  valign=middle bgcolor=00ffff>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
        <tr bgcolor=00ff00>
            <!-- ********* Begin2 ********* -->
            <td width="120">张三</td>
            <td align="center">90</td> 
            <!-- ********* End 2********* -->
        </tr>
    </table>   
</body>

\

avatar
文章
阅读
粉丝