【html】table表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <!--
    table属性:
        border:边框厚度
        cellpadding:单元格填充
        cellspacing:单元格间距
        align:对齐方式
        bgcolor:表格背景颜色

    thead:头部信息,tr里面的标签要使用th
    tbody:tr:行标签;td:单元格

    细线标签:黄色细线
        <table bgcolor="yellow">
            <tr bgcolor="white">
        </table>
    -->
    <table border="1" width="500" height="200" cellpadding="0" cellspacing="1" bgcolor="yellow"   align="center">
        <caption><h3>小说排行榜</h3></caption>

        <thead>
            <tr bgcolor="white" >
                <th>排名</th>
                <th>关键字</th>
                <th>趋势</th>
                <th>今日搜索</th>
                <th>最近七日</th>
                <th>相关链接</th>
            </tr>
        </thead>

        <tbody>
            <tr bgcolor="white">
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>345</td>
                <td>123</td>
                <td><a href="">贴吧</a> <a href="">图片</a> <a href="">百科</a> </td>
            </tr>

            <tr bgcolor="white">
                <td>2</td>
                <td>盗墓笔记</td>
                <td><img src="up.jpg"></td>
                <td>124</td>
                <td>2222</td>
                <td><a href="">贴吧</a> <a href="">图片</a> <a href="">百科</a> </td>
            </tr>

            <tr bgcolor="white">
                <td>3</td>
                <td>西游记</td>
                <td><img src="up.jpg"></td>
                <td>212</td>
                <td>7654</td>
                <td><a href="">贴吧</a>   <a href="">图片</a> <a href="">百科</a></td>
            </tr>

            <tr bgcolor="white">
               <td>4</td>
                <td>东游记</td>
                <td><img src="up.jpg"></td>
                <td>23</td>
                <td>75645</td>
                <td><a href="">贴吧</a>   <a href="">图片</a> <a href="">百科</a></td>
            </tr>

            <tr bgcolor="white">
                <td>5</td>
                <td>甄嬛传</td>
                <td><img src="down.jpg"></td>
                <td>121</td>
                <td>7676</td>
                <td><a href="">贴吧</a>   <a href="">图片</a> <a href="">百科</a></td>
            </tr>

            <tr bgcolor="white">
                <td>6</td>
                <td>水浒传</td>
                <td><img src="up.jpg"></td>
                <td>576576</td>
                <td>1231421</td>
                <td><a href="">贴吧</a>   <a href="">图片</a> <a href="">百科</a></td>
            </tr>

            <tr bgcolor="white">
                <td>7</td>
                <td>三国演义</td>
                <td><img src="up.jpg"></td>
                <td>234</td>
                <td>7686</td>
                <td><a href="">贴吧</a>   <a href="">图片</a> <a href="">百科</a></td>
            </tr>

        </tbody>
    </table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
</head>
    <!--
    默认单元格行和列都为1
    colspan:单元格所占列
    rowspan:单元格所占行

    -->

<body>
    <table width="300" height="200"  bgcolor="yellow" cellspacing="1" align="center" cellpadding="1" border="1">
        <caption>课程表</caption>
        <tr bgcolor="white">
          <th colspan="2" width="60"></th>
          <th>星期一</th>
          <th>星期二</th>
          <th>星期三</th>
          <th>星期四</th>
          <th>星期五</th>
        </tr>

        <tr bgcolor="white">
           <td rowspan="2" width="50">上午</td>
           <td width="30">1</td>
           <td>语文</td>
           <td>数学</td>
           <td>物理</td>
           <td>化学</td>
           <td>生物</td>

        </tr>
        <tr bgcolor="white">
           <td>2</td>
           <td>体育</td>
           <td>音乐</td>
           <td>几何</td>
           <td>画画</td>
           <td>舞蹈</td>

        </tr>
        <tr bgcolor="white">
           <td rowspan="2">下午</td>
           <td>1</td>
           <td>体育</td>
           <td>画画</td>
           <td>音乐</td>
           <td>语文</td>
           <td>音乐</td>

        </tr>

        <tr bgcolor="white">
           <td>2</td>
          <td>英语</td>
          <td>舞蹈</td>
          <td>体育</td>
          <td>唱歌</td>
          <td>体育</td>
        </tr>
    </table>
</body>
</html>
时间: 2024-11-06 03:48:00

【html】table表格的相关文章

学习10 table表格制作标签

<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>认识table表格标签</title> <style type="text/css"> table tr td,th{border:1px solid

使用JS遍历Table表格中所有单元格内容

通过JS去遍历Table的所有单元格中的内容,可以用如下JS代码实现:使用该方法时必须为Table表格设置唯一的id属性. function GetInfoFromTable() { var tableInfo = ""; var tableObj = document.getElementByIdx_x("tableid"); //获取表格对象 for (var i = 0; i < tableObj.rows.length; i++) { //遍历Tabl

Table表格横竖线实现Css

.tablel { border-collapse:collapse; /* 关键属性:合并表格内外边框(其实表格边框有2px,外面1px,里面还有1px哦) */ border:solid #999; /* 设置边框属性:样式(solid=实线).颜色(#999=灰) */ border-width:1px 0 0 1px; /* 设置边框状粗细:上 右 下 左 = 对应:1px 0 0 1px */} .tablel th{border:solid #999;border-width:0 1

jQuery实现的table表格隔行换色代码实例

jQuery实现的table表格隔行换色代码实例:下面是一段代码实例,能够实现隔行变色的效果,这是网站人性化措施之一,在实际应用中的使用非常广泛.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <t

table表格单元格中的内容如何强制换行

table表格单元格中的内容如何强制换行:有时候表格单元格中的内容不会换行,那么这个就会严重影响到用户体验,下面就简单介绍一下如何实现单元格中的内容换行.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51texiao.cn/" />

利用JavaScript如何创建一个table表格[第2种方法]

创建一个五行五列的表格(使用循环) <style> td{border:1px solid #ccc;} </style> <script> window.onload=function(){ var oTable=document.createElement("table"); var row; var cell; for(var i=0;i<5;i++){ row=document.createElement("tr")

我理解的&lt;table&gt;表格

<table>表格 [默认样式] //IE7-浏览器不支持border-spacing table{ border-collapse: separate; border-spacing: 2px; border: 1px solid gray; } [属性] [1]border(在html5中,border只能为"1"或" ") border="0"//没有边框 border="8"//8像素宽的边框 [2]cel

javascript添加或者删除table表格行代码实例

javascript添加或者删除table表格行代码实例:表格是常用的元素,虽然在布局中已经鲜有使用,已经基本被div css所取代,但是在组织表格数据方面还是有很大的优势的,比使用div css要来的方便,添加或者删除一行也就是其中的tr更是最为常见的操作,下面就通过代码实例简单介绍一下如何实现此效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta

实现table表格各行变色代码实例

实现table表格各行变色代码实例:本章节介绍一下如何实现表格内容的隔行变色效果,这一效果的应用非常广泛,因为它有着较高的实用性,并且实现代码也比较简单,下面就通过代码实例介绍一下如何实现此效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softw

asp.net table表格表头及列固定实现

在开发中常会遇到table表格中列特别多,下拉后,表头就看不见了,水平滚动后,第1.2列就看不见了,于是需求就出来了,就是需要固定table的表头和列. demo结构如下图所示: demo下载地址:http://download.csdn.net/detail/taomanman/9124949 示例运行效果如下图所示: 版权声明:本文为博主原创文章,未经博主允许不得转载.