HTML学习笔记 CSS表格及轮廓案例 第八节 （原创）参考使用表

#tb, tb1, tr, th, td {
    border: 5px solid blue;
    /*加边框*/
    padding: 5px;
    /*内边距*/
}

#tb1 {
    border-collapse: collapse;
    /*合并边框*/
    width: 500px;
    height: 500px;
    text-align: center;
    background-color: aqua;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格及轮廓</title>
    <link rel="stylesheet" href="tzy.css" type="text/css">
</head>
<body>
<table id="tb">
    <tr class="alt">
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>小王</td>
        <td>15</td>
        <td>男</td>
    </tr>
    <tr class="alt">
        <td>小王</td>
        <td>15</td>
        <td>男</td>
    </tr>
    <tr>
        <td>小王</td>
        <td>15</td>
        <td>男</td>
    </tr>
</table>
<br/>
<table id="tb1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>小王</td>
        <td>15</td>
        <td>男</td>
    </tr>
    <tr>
        <td>小王</td>
        <td>15</td>
        <td>男</td>
    </tr>
    <tr>
        <td>小王</td>
        <td>15</td>
        <td>男</td>
    </tr>
</table>
<br/>
<br/>
<p style="outline-style: groove;outline-width: 1px">文字效果实心框</p>
<br/>
<br/>
<p style="outline-style: double;outline-width: 20px">文字效果双虚线框</p>
</body>
</html>
时间： 2024-10-25 18:17:07

HTML学习笔记 CSS表格及轮廓案例 第八节 （原创）参考使用表的相关文章

HTML学习笔记 CSS表格及轮廓 第八节 （原创）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表格及轮廓</title> <link rel="stylesheet" href="tzy.css" type="text/css"></head><body>&l

HTML 学习笔记 CSS(表格)

CSS 表格属性可以帮助您极大的改善表格的外观 表格边框 如需在CSS中设置表格的边框 请使用border属性. 在下面的例子中table th 以及td设置了蓝色边框. table, th, td { border: 1px solid blue; } ??上例中的表格具有双线条边框 这是由于table th td元素都具有独立的边框 如果 你想要把表格显示为单线条框 请使用border-collapse属性 折叠边框 border-collapse属性设置是否将表格的边框折叠为单一边框 ta

html+css学习笔记 5[表格、表单]

表格 -- 默认样式重置 表格标签:     table 表格     thead 表格头     tbody 表格主体     tfoot 表格尾     tr 表格行     th 元素定义表头     td 元素定义表格单元 表格样式重置 table{border-collapse:collapse;} 单元格间隙合并 th,td{padding:0;}重置单元格默认填充   单元格合并 rowspan  属性规定单元格可横跨的行数.     <td rowspan="2"

Linux学习笔记——例说makefile 综合案例

0.前言 从学习C语言开始就慢慢开始接触makefile,查阅了很多的makefile的资料但总感觉没有真正掌握makefile,如果自己动手写一个makefile总觉得非常吃力.所以特意借助博客总结makefile的相关知识,通过例子说明makefile的具体用法. 例说makefile大致分为4个部分 1.只有单个C文件 2.含有多个C文件 3.需要包括头文件路径 4.一个较为复杂的例子 [代码仓库]--makefile-example 代码仓库位于bitbucket,可借助Tortoise

[CSS3]学习笔记-CSS基本样式讲解

1.CSS样式-背景 CSS运行应用纯色作背景,也允许使用背景图像创建相当复杂的效果 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" hre

HTML 学习笔记 CSS(轮廓)

轮廓(outline)是绘制于元素周围的一条线 位于边框边缘的外围 可起到突出元素的作用 CSS outline属性规定元素轮廓的样式 颜色和宽度 话不多说 来几个例子 看一看 1:在元素周围画线 <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p { border: red solid t

HTML学习笔记 css定位（静态，相对，固定，绝对布局）偏移案例 第十二节 （原创） 参考使用表

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS定位(静态,相对,固定,绝对布局)小广告案例</title> <link rel="stylesheet" href="tzy.css" type="text/css"> <

HTML学习笔记 基础表格案例 第二节 （原创） 参考使用表

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <table border="1" cellpadding="10" cellspacing="10" bgcolo

HTML学习笔记 css定位浮动及瀑布流案例 第十三节 （原创） 参考使用表

#fd { width: 100px; height: 150px; background-color: forestgreen; float: left; } #sd { width: 150px; height: 100px; background-color: coral; float: left; } #td { width: 100px; height: 100px; background-color: chartreuse; float: left; } #container { w