Tables ’s Introduction表格功能简介

There are many websites on the Internet that display information like stock prices, sports scores, invoice data, and more. This data is naturally tabular in nature, meaning that a table is often the best way of presenting the data.

In this part of the course, we’ll learn how to use the HTML

element to present information in a two-dimensional table to the users.

Let’s get started!

一开始循序渐进地了解代码语法介绍，接着完成左边的系列任务，会同时在右边栏即时显示效果。即便出错，也会弹出红色标点，显示错误原因，让自己更快地定位如何修改。

课后小测

一般是选择题和填空题，10-12道题，检查对表格语法的概念掌握和代码运用。难度一般，强迫症的我，一旦错了一题，一定会重刷满分。

Review复习内容

Let’s review what we’ve learned so far:

The table element creates a table.

The tr element adds rows to a table.

To add data to a row, you can use the td element.

Table headings clarify the meaning of data. Headings are added with the th element.

Table data can span columns using the colspan attribute.

Table data can span rows using the rowspan attribute.

Tables can be split into three main sections: a head, a body, and a footer.

A table’s head is created with the thead element. A table’s body is created with the tbody element. A table’s footer is created with the tfoot element.

All the CSS properties you learned about in this course can be applied to tables and their data.

完成项目

<!DOCTYPE>

<html> 
<head> 
<meta charset="utf-8"> 
<title> Aguillar Family Wine Festival </title> 
<link rel="stylesheet" type="text/css" href="reset.css" /> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"> 
</head> 

    <tr>
      <th colspan="2">
      <h1>Wine Festival Schedule</h1> 
      </th>
    </tr>
    <th>
      <h2>Time</h2>
    
    </th>

    <th>
      <h2>Event</h2>
    
    </th>

    <tr>

    </tr>
  
  </thead>

  <tb>
    <tr>
      <td class="left">
        <h3>12:00 PM</h3>
      </td>
      <td>
        <h3>Welcome Reception</h3>
      </td>
    </tr>
    

    <tr>
      <td class="left">
        <h3>1:00 PM</h3>
        
      </td>
      <td>
        <h3>Storytelling & Tasting</h3>
      </td>
    </tr>

    <tr>
      <td class="left">
        <h3>2:00 PM</h3>
      </td>
      <td>
        <h3>Wine Luncheon</h3>
      </td>
    </tr>

    <tr>
      <td class="left">
        <h3>3:00 PM</h3>
      </td>
      <td>
        <h3>Aguillar Family Wines</h3>
      </td>

    </tr>

    <tr>
      <td class="left">
        <h3>4:00 PM</h3>
      </td>
      <td>
        <h3>Wine & Cheese Tasting</h3>
      </td>
    </tr>
  </tb>
</table>
</html>

欢迎关注，自学前端的我@AlexanderOuyang

您的点赞和评论互动，是我在这个技术氛围浓厚，热心有爱的掘金社区，

每日坚持更新前端专栏的最大动力！

2020-05-06 从表格功能入门到完成项目From Table’s Introduction to Project

Tables ’s Introduction表格功能简介

课后小测

Review复习内容