tnblog
首页
视频
资源
登录
原

初学html表格、列表

4758人阅读 2022/2/25 9:57 总访问：89910 评论：0 收藏：0 手机
分类: html 


  1. <!doctype html>

  2. <html lang="en">

  3. <head>

  4.     <meta charset="UTF-8">

  5.     <meta name="viewport"

  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">

  8.     <title>Document</title>

  9. </head>

  10. <body>

  11. <!--    bgcolor="yellow"-->

  12. <!--        border 边框粗细 默认为“”，表示没有边框 -->

  13. <!--        align: left/center/right  规定表格相对周围元素的对其方式 -->

  1. <!--        cellpadding 规定单元边沿与其内容之间的空白，默认1像素  -->

  2. <!--        width 设置表格的宽度 -->

  3. <!--        cellspacing 表格中单元格与单元格之间的空白，默认2像素 -->

  4.     <table align="center" border="4" style="width:500px;color:yellow;font-family:宋体" bgcolor="orange" >

  5.         <tr bgcolor="red">

  6.             <th>标题</th>

  7.             <th>标题</th>

  8.             <th>标题</th>

  9.             <th>标题</th>

  10.             </tr>

  11.         <tr>

  12.             <td>11</td>

  13.             <td>22</td>

  14. <!--        rowspan是| cospan—  -->

  15.             <td rowspan="2" style="text-align:center">33</td>

  16.             <td>33</td></tr>

  17. <!--        第二行-->

  18.         <tr>

  19.             <td >11</td>

  20.             <td>22</td>

  21.             <td>33</td>

  22. <!--        第四行-->

  23.         <tr>

  24.             <td>11</td>

  25.             <td colspan="2">22</td>

  26.             <td>33</td>

  27.             </tr>

  28. <!--        第五行-->

  29.         <tr>

  30.             

  31.             <td rowspan="2">22</td>

  32.             <td>33</td>

  33.             <td>44</td>

  34.             <td>11</td>

  35.         <tr>

  36. <!--        第六行-->

  37.             <td>11</td>

  38.             <td>33</td>

  39.             <td>44</td>

  40.             </tr>

  41.     </table>

  42. </body>

  43. </html>

style标签：以下是style标签能用到的，最好记住

  1. <style>

  2. .textbox{BACKGROUND: #BFCEDC; BORDER-TOP: #7F9DB9 1px solid; 

  3. BORDER-LEFT: #7F9DB9 1px solid; BORDER-RIGHT: #7F9DB9 1px solid; 

  4. BORDER-BOTTOM: #7F9DB9 1px solid;

  5. FONT-FAMILY: "宋体", "Verdana", "Arial", "Helvetica"; FONT-SIZE: 12px; 

  6. TEXT-ALIGN: LIFT;}

  7. </style>

设置表格时候的简便方法：

  1. tr*5>td*5>{内容$}

  2. <!--        效果-->

  3. <tr>

  4.     <td>内容1</td>

  5.     <td>内容2</td>

  6.     <td>内容3</td>

  7.     <td>内容4</td>

  8.     <td>内容5</td>

  9. </tr>

  10. <tr>

  11.     <td>内容1</td>

  12.     <td>内容2</td>

  13.     <td>内容3</td>

  14.     <td>内容4</td>

  15.     <td>内容5</td>

  16.     </tr>

  17.     <tr> 

  18.     <td>内容1</td>

  19.     <td>内容2</td>

  1.     <td>内容3</td>

  2.     <td>内容4</td>

  3.     <td>内容5</td>

  4. </tr>

  5. <tr>

  6.     <td>内容1</td>

  7.     <td>内容2</td>

  8.     <td>内容3</td>

  9.     <td>内容4</td>

  10.     <td>内容5</td>

  11. </tr>

  12. <tr>

  13.     <td>内容1</td>

  14.     <td>内容2</td>

  15.     <td>内容3</td>

  16.     <td>内容4</td>

  17.     <td>内容5</td>

  18. </tr>

来一个js版的隔行变色：
【本人不会js，在网上看的视频只会这几个】

  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4.     <meta charset="UTF-8">

  5.     <title>Title</title>

  6. </head>

  7. <body>

  8. <!--    cellpadding="10" width="20" cellspacing="50"-->

  9.   <table id="aini" cellspacing="50" align="center" border="4" style="width:600px;" >

  10.       <tr >

  11.           <th>姓名</th> <th>班级</th> <th>年龄</th> <th>班级</th>

  12.       </tr>

  13.       <tr>

  14.           <td>11</td>

  15.           <td>22</td>

  16.           <td>33</td>

  17.           <td>44</td>

  18.       </tr>

  19.       <tr>

  20.           <td>11</td>

  21.           <td colspan="2" style="text-align:center;">22</td>

  22.           <td>44</td>

  23.       </tr>

  24.       <tr>

  25.           <td>11</td>

  26.           <td>22</td>

  27.           <td>33</td>

  28.           <td>44</td>

  29.       </tr>

  30.       <tr>

  31.           <td>11</td>

  32.           <td>22</td>

  33.           <td rowspan="2" style="text-align:center;">33</td>

  34.           <td>44</td>

  35.       </tr>

  36.       <tr>

  37.           <td>11</td>

  38.           <td>22</td>

  39.           <td>44</td>

  40.       </tr>

  41.   </table>

  42.     <script>

  43.             window.onload = function(){

  44. <!--                1.获取表格-->

  45.                 var tblEle = document.getElementById("aini");

  46. <!--                2.获取表格中tbody里面的行数(长度)-->

  47.                 var len = tblEle.tBodies[0].rows.length;

  48.                 //alert(len);

  49. <!--                3.对tbody里面的行进行遍历-->

  50.                 for(var i=0;i<len;i++){

  51.                     if(i%2==0){

  52. <!--                        4.对偶数行设置背景颜色-->

  53.                         tblEle.tBodies[0].rows[i].style.backgroundColor="pink";

  54.                     }else{

  55. <!--                        5.对奇数行设置背景颜色-->

  56.                         tblEle.tBodies[0].rows[i].style.backgroundColor="gold";

  57.                     }

  58.                 }

  59.             }

  60.         </script>

  61. </body>

  62. </html>

效果：

thead和thbody：表格结构标签

  1. <table border="6">

  2.     <thead>

  3.     <tr>

  4.         <th>排名</th>

  5.         <th>关键词</th>

  6.         <th>趋势</th>

  7.         <th>进入搜索</th>

  8.         <th>最近七日</th>

  9.         <th>相关链接</th>

  10.     </tr>

  11.     </thead>

  12. </table>

  13.     <table border="7">

  14.    <tbody>

  15.     <tr>

  16.         <td>1</td>

  17.         <td>鬼吹灯</td>

  18.         <td><img src="图片" width="10"></td>

  19.         <td>345</td>

  20.         <td>123</td>

  1. 表.                                                                                                                                                                                                                                                                                                                                                2                                                    7y

无序列表：

  1. <!-- 在html中，margin的意思为“外边距”，指的是围绕在元素边框的空白区域 -->

  2. <style="margin:1px 0;">

  1. <!-- list-style-type：参数 -->

  2. 参数取值范围：

  3. ·disc：圆形

  4. ·circle：空心圆

  5. ·square：方块

  6. ·decimal：十进制数字

  7. ·lower-roman：小写罗马数字

  8. ·upper-roman：大写罗马数字

  9. ·lower-alpha：小写希腊字母

  10. ·upper-alpha：大写希腊字母

  11. ·none：无符号显示


  1. <body>

  2. <!--    ul  li 无序-->

  3.     <ul style="text-align:center;background:orange;">

  4.         <li style="list-style:upper-alpha">one</li>

  5.         <li style="list-style:square">two</li>

  6.         <li style="list-style:lower-roman">three</li>

  7.         <li style="list-style:none">four</li>

  8.     </ul>

  9. </body>

自定义列表：
在HTML标签中，<dl>标签用于定义描述列表（或定义列表），该标签与<dt>（定义项目名字）和<dd>（描述每一个项目/名字）一起使用。

  1. <body>

  2.     <dl style="text-align:center;background:orange;">

  3.         <dt>关注我们</dt>

  4.         <dd>新浪微博</dd>

  5.         <dd>官方微信</dd>

  6.         <dd>联系我们</dd>

  7.     </dl>

  8. </body>

有序列表：

  1. <!--    ol  li 有序--> 

  2. <ol style="text-align:center;background:orange;">

  3.     <li style="list-style:upper-alpha">one</li>

  4.     <li style="list-style:square">two</li>

  5.     <li style="list-style:lower-roman">three</li>

  6.     <li style="list-style:none">four</li>

  7. </ol>


评价

初学html
https://code.visualstudio.com/a标签：超链接格式：&lt;a href=&quot;网页&quot;&gt;在你的html网页中显示的名字&lt;/a&gt...

初学html表单
表单域：表单域是一个包含表单元素的区域在HTML标签中,&lt;form&gt;标签用于定义表单域，以狮子按用户信息的收集和传递&lt;...

初学html常用样式
div{ padding:25px; border:10pxdotted#000000; background-color:rgb(233,233,55); background-clip:context-box; }b...

htmlAgilityPack 网页数据处理
HtmlAgilityPack网络数据处理新年新气象！祝大家新的一年里蓬勃发展，飞黄腾达，幸福健康！今天讲的是一款处理网络数据的框...

html/css样式
代码： &lt;!DOCTYPEhtml&gt; &lt;html&gt; &lt;head&gt; &lt;metacharset=&quot;utf-8&quot;/&gt; &lt;title&gt...

html转换为js，节省重复模块的编写时间
有些时候，我们需要多次应用到自己的布局块，我们可以通过将html代码装换成js文件来装取代码下次需要用到时，去引入对应的j...

.net core 使用AntiXSSLibrary，htmlSanitizationLibrary 防止xss攻击
先下载相关依赖：install-package AntiXSSLibraryinstall-package HtmlSanitizationLibrary下载成功后一个方法即可Sanitize...

小程序html解析如：后台添加的文章详情
项目中遇到在微信小程序里需要显示音乐文章的内容，文章内容是通过接口读取的服 务器中的富文本内容，是html格式的，小程序...

html5播放mp3
代码比较简单：&lt;audiocontrols&gt; &lt;sourcesrc=&quot;horse.ogg&quot;type=&quot;audio/ogg&quot;&gt; &lt;sources...

vue中的v-html
v-html可以把字符串当成一个html来渲染，而不是原样输出Html类似.net mvc中的@Html.Raw()方法&lt;divv-html=&quot;item.tit...

Sanitizer.GetSafehtmlFragment报错Could not load file or assembly
Sanitizer.GetSafeHtmlFragment报错Could not load file or assembly &#39;System.Configuration.ConfigurationManager我不...

Markdown转html的显示处理
数据库保存转化好的html格式，前台直接显示" class="reference-link">方法1 ： 数据库保存转化好的html格式，前台直接显示m...

html+css3+js 实现生日快乐代码，动态生成效果
&lt;!DOCTYPEhtml&gt; &lt;html&gt; &lt;head&gt; &lt;metacharset=&quot;UTF-8&quot;&gt; &lt;title&gt;生日快乐&lt;/...

html li如何横向排列
li元素是块状元素，所以元素与元素之间才会换行，现在只要把li元素变成元素之间可以同行内联的块状元素就行了。代码如下：l...

vscode中html代码补全
下载一个插件：HTML Snippets 然后：点击 文件-首选项-设置在用户设置中加入一下设置即可 &quot;files.associations&quo...
1
博主信息
排名
34
文章
19
粉丝
1
评论
1
文章类别
最新文章
最新评价
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术