• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

html学习3(表格table、列表list)

武飞扬头像
木有童年
帮助1

1、html表格由<table>标签来定义。

  • <thead>用来定义表格的标题部分,其内部用 <th > 元素定义列的标题,可以使其在表格中以粗体显示,与普通单元格区分开来。
  • <tbody>用来定义表格的主体部分,其内部用<tr>元素定义行,在行中用<td>定义单元格数据。

2、如果不定义边框属性border,边框默认隐藏。 

3、用caption定义整个表格标题。

  1.  
    <!DOCTYPE html>
  2.  
    <html>
  3.  
    <head>
  4.  
    <title>编程语言排名与特点</title>
  5.  
    </head>
  6.  
    <body>
  7.  
    <table border="1" cellspacing="0"><!--定义表格,边框宽度设置为1,单元格间接为0-->
  8.  
    <caption>编程语言榜</caption><!--表格标题-->
  9.  
    <thead><!--表格头-->
  10.  
    <tr>
  11.  
    <th>排名</th><!--定义3个标题-->
  12.  
    <th>名称</th>
  13.  
    <th>格言</th>
  14.  
    </tr>
  15.  
    </thead>
  16.  
    <tbody><!--表格主体-->
  17.  
    <tr><!--一行表格-->
  18.  
    <td>1</td>
  19.  
    <td>PHP</td>
  20.  
    <td>世界上最好的编程语言</td>
  21.  
    </tr>
  22.  
    <tr>
  23.  
    <td>2</td>
  24.  
    <td>java</td>
  25.  
    <td>一处编译,到处运行</td>
  26.  
    </tr>
  27.  
    <tr>
  28.  
    <td>3</td>
  29.  
    <td>python</td>
  30.  
    <td>人生苦短,我用python</td>
  31.  
    </tr>
  32.  
    </tbody>
  33.  
    <tfoot>制表人:zkedemo</tfoot>
  34.  
    </table>
  35.  
    </body>
  36.  
    </html>
学新通

运行结果:

学新通

 4、列表由<ul>定义无序列表,<ol>定义有序列表,<li>用于定义列表实际的项。有序列表中可以用type属性指定排序的方式,默认为阿拉伯数字,type='A'表示英文字母排序,type="I"表示大写的罗马数字。

  1.  
    <!DOCTYPE html>
  2.  
    <html>
  3.  
    <head>
  4.  
    <meta charset="utf-8">
  5.  
    <title>html列表</title>
  6.  
    </head>
  7.  
    <body>
  8.  
    <ul><!--无序列表-->
  9.  
    <li>PHP</li>
  10.  
    <li>java</li>
  11.  
    <li>python</li>
  12.  
    </ul>
  13.  
    <ol type="A"><!--有序列表,英文字母排序-->
  14.  
    <li>PHP</li>
  15.  
    <li>java</li>
  16.  
    <li>python</li>
  17.  
    </ol>
  18.  
    <ol type="I"><!--有序列表,大写罗马数字排序-->
  19.  
    <li>PHP</li>
  20.  
    <li>java</li>
  21.  
    <li>python</li>
  22.  
    </ol>
  23.  
    </body>
  24.  
    </html>
学新通

运行结果:

学新通

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanhfjjbkg
系列文章
更多 icon
同类精品
更多 icon
继续加载