【HTML5 & CSS3】第二弹

weiter

昨天搞定了最基本的框架，今天给它加点别的，比如表格！
下面上一个很简单的表格。。。的代码

1. <table>
   
2.         <tr><th>名字</th><th>年龄</th></tr>
   
3.         <tr><td>小甲鱼</td><td>未知</td></tr>
   
4.         <tr><td>不二如是</td><td>未知</td></tr>
   
5. </table>

复制代码

本来想按照教学视频里的做的，但是看到弹幕的内容，，，还是算了吧。
<tr>是表格行。
<th>是表格头，自带加粗效果（我应该没说错吧。。。）
<td>是表格的。。。格子。
然后当我们激动地运行的时候。。。

我屮艸芔茻！怎么连个边框都莫有啊

对，就是连边框都莫有。。。具体原因详见小甲鱼老师教程
如果想要边框，好办CSS3走起。在html文件里边加上这个（我这个是同个文件夹下的同级文件，相对路径。。。 ）

1. <link rel="stylesheet" type="text/css" href="xxx.css">

复制代码

然后在css文件里面加上这个

1. table{
   
2.         border: 2.5px solid crimson;
   
3. }
   
4. th{
   
5.         border: 2.5px solid crimson;
   
6. }
   
7. tr{
   
8.         border: 2.5px solid crimson;
   
9. }
   
10. td{
    
11.         border: 2.5px solid crimson;
    
12. }

复制代码

这样就有边框了，还是，两个！
因为这是给每一个标签上都加了边框，所以买一送一了，虽然我觉着挺好看的。。。
如果我们在table的css属性里面加上这个

1. border-collapse: collapse;

复制代码

边框就会自动合并，合二为一！
就是看到这个字，，，没有居中，很不舒服，在table的css属性里面加上。。。

1. text-align: center;

复制代码

居中了！舒适
下一弹，我们将要复习？？？

喜欢的话记得收藏获订阅哦

weiter

沙发

liuzhengyuan

做的真好

我正在做 css3 的 笔记

weiter

liuzhengyuan 发表于 2020-4-6 13:20
做的真好

我正在做 css3 的 笔记

？我其实本来也是直接走CSS3的，忽然发现我好像得从HTML5和CSS3一起搞。。。

liuzhengyuan

weiter 发表于 2020-4-6 13:24
？我其实本来也是直接走CSS3的，忽然发现我好像得从HTML5和CSS3一起搞。。。

我 h5 已经做完了

weiter

liuzhengyuan 发表于 2020-4-6 13:25
我 h5 已经做完了

wow!牛批

weiter

liuzhengyuan 发表于 2020-4-6 13:20
做的真好

我正在做 css3 的 笔记

谢谢夸奖

weiter

这算是一个新的bug吗？被审核的帖子可以看得到回复。。。