凭借自己前端方面的这个技术，竟多次拒绝字节跳动，腾讯这样的大公司，辞去AL/ML的工作，是什么让他底气十足？

本来这篇文章是要更前端核心框架的，但我学生在公司跟领导处理项目的事情，让我痛定思痛，再给大家来一篇这样的文章，
希望大家能够认真的笔记并消化。
前端就是思维+转变的一个东西，它富有灵魂，当你沉醉其中，里面的诸多奥秘就会让你流连忘返，深沉品味。

前端的技术一直更新特别快，特别是框架这块。

但是归根结底，那都是后话，因为我们要想在企业站住脚步，扎根就一定要稳，跟做人是一个道理。起步可以慢，但是我们掌握了一定的技巧后，我们可以融会贯通，做事情事半功倍！

今天给大家带来的第三节课：核心语法阶段——html/css（表格与表格布局）

大家想学习好前端，CSS就是你的脸面，就是你的气质。你的样式结构让人看上去赏心悦目，
你就要像对待自己的穿着一样对待你的代码。
要不厌其烦，要耐心审视。扎实好基础，最近看书，感觉受益匪浅，专门记录自己的学习补充过程。

本文主要讨论表格的布局及美化。首先我们来看HTML中表格包含哪些标签及属性。

表1：表格标签及属性
其中有几个属性是我们常用来实现表格布局及美化的：

CSS中的表格是一种布局方式，它比较适合内容需要分栏时使用。而HTML中的表格，是确确实实存在表格数据的。
说起表格，大家脑海里就会浮想起行和列来。我们可以把CSS表格想象成一个电子表格，一个个单元格组成，
在每个单元格里会包含一个HTML块元素。

在表格中增加HTML结构时，我们先要创建一个< div>.这个< div>代表着整个表格。再在每一行里创建一个< div> 。每一列里包含着一个块元素作为它的内容。（两个块元素 “main”(div） 和”sidebar”< div> 是不是很简单呢？

HTML：

…
<div id=”tableContainer>
   <div id=”tableRow”>
     <div id=”main”>
       …
</div>
<div id=”siderbar”>
…
</div>
  </div>
</div>
…

CSS创建表格显示：

//这是最外层的<div>
div#tableContainer{
    display:table;  //设置显示方式为表格
}
 
//tableRow 表示表格中的一行，如果我们有多行，可以使用一个类
div#tableRow{
    display: table-row;
}
 
#main{
display:table-cell;  //作为表格单元格形式
font-size:105%;
 ．．．．
}
 
#siderbar{
  display:table-cell;
  padding:15px;
  …….
}
 

HTML中的表格就是真正意义上的表格了，它由行列，单元格组成，每个单元格里面存放了一些数据。

我们来看个简单的表格

<table>
<caption>这是一个表格</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>分数</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>20/td>
</tr>
<tr>
<td>小红</td>
<td>女</td>
<td>30</td>
</tr>
<tr>
<td>小名/td>
<td>女</td>
<td>30</td>
</tr>
</table>

我们还可以合并单元格，合并行：rowspan  合并列：colspan

在为表格设置CSS样式时，我们需要注意到的是，我们不能单独地设置单元格的“外边距”，
而是要为所有单元格设置一个共同的间距。表格的单元格是没有外边距的。关于表格的CSS样式我就不多提了，
因为毕竟文章的重点不在这。

前端学习要想精就得静，静下心来，看上去知识点很多很杂，但是你把文章

点赞或者收藏起来，

每次写代码的时候对应着写，代码有时候就像一杯茶，得品，你自然而然意境就和别人拉开差距。

我叫安老师——你的人生解答老师