⭐ 欢迎来到虫虫下载站！ | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站
📤 上传资源

📄 tables.html

📁 一套css模板
💻 HTML
字号:
🔍 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>free-css-templates-285</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="wrap">
<div id="topbar">
<h1>Rambling<span>Soul</span></h1>

</div>
<div id="header">
<div id="menu">
  <ul>
    <li><a href="index.htm">Welcome Page</a></li>
    <li class="active"><a href="tables.html">example of tables</a></li>
    <li><a href="forms.html">Example of Forms</a></li>
    <li><a href="otherstuff.html">Other Stuff</a></li>

  </ul>
</div>
</div>
<div id="mainpage">
<div id="content">

<h1>Table Example</h1>
<table cellspacing="0" cellpadding="0">
  <tr>
    <th scope="col">Lorem</th>
    <th scope="col">Ipsum</th>
    <th scope="col">Dolor</th>
  </tr>
  <tr>
    <td>Sed </td>
    <td>fermentum </td>
    <td>1500</td>
  </tr>
  <tr>
    <td>nulla</td>
    <td> eu sem</td>
    <td>2500</td>
  </tr>
  <tr>
    <td> malesuada </td>
    <td>varius. </td>
    <td>3500</td>
  </tr>
</table>
<h3>Another Table</h3>
<table cellspacing="0" cellpadding="0">
  <tr>
    <th scope="row">Lorem</th>
    <td>2500</td>
    <td>ABCD</td>
  </tr>
  <tr>
    <th scope="row">Ipsum</th>
    <td>5400</td>
    <td>EFG</td>
  </tr>
  <tr>
    <th scope="row">Dolor</th>
    <td>1200</td>
    <td>GIJK</td>
  </tr>
  <tr>
    <th scope="row">Sit</th>
    <td>800</td>
    <td>LMN</td>
  </tr>
</table>
<h3>One More Table</h3>
<table cellspacing="0" cellpadding="0">
  <tr>
    <th scope="col">ABC</th>
    <th scope="col">Quantity</th>
    <th scope="col">Amount</th>
  </tr>
  <tr>
    <th scope="row">Dolor</th>
    <td>25</td>
    <td>2500</td>
  </tr>
  <tr>
    <th scope="row">Ipsum</th>
    <td>12</td>
    <td>120</td>
  </tr>
  <tr>
    <th scope="row">Lorem</th>
    <td>8</td>
    <td>80</td>
  </tr>
</table>

  <p class="postinfo"> Post Info -  <a href="http://www.865171.cn">Category</a> | <a href="http://www.865171.cn">0 Comments</a></p>
<h2>Heading 2 - Image</h2>
 
 <img src="images/image.gif" alt="Image" /> <p>Etiam semper tempor risus. Nunc fermentum neque quis erat  vehicula elementum. Aliquam egestas lectus ac magna accumsan varius.  Phasellus tempor euismod libero. Nunc ultrices, ante non condimentum  rutrum, sapien nulla commodo neque, auctor blandit lacus mi at lacus.  Donec et turpis vulputate mi consectetuer pellentesque. Mauris in  risus. </p>
 
  
  <img class="left" src="images/image.gif" alt="Image" />
  <p>Ut nonummy. Donec auctor. Nunc non arcu. Ut lectus. Etiam tellus  enim, vulputate egestas, iaculis sed, vestibulum eu, enim. Vivamus  tellus erat, placerat a, ultricies vel, rhoncus sed, mi. Etiam semper tempor risus. Nunc fermentum neque quis erat  vehicula elementum. Aliquam egestas lectus ac magna accumsan varius.  Phasellus tempor euismod libero. Nunc ultrices, ante non condimentum  rutrum, sapien nulla commodo neque, auctor blandit lacus mi at lacus.  Donec et turpis vulputate mi consectetuer pellentesque. Mauris in  risus. </p>
  <p><img class="right" src="images/image.gif" alt="Image" width="87" height="95" />Etiam semper tempor risus. Nunc fermentum neque quis erat  vehicula elementum. Aliquam egestas lectus ac magna accumsan varius.  Phasellus tempor euismod libero. Nunc ultrices, ante non condimentum  rutrum, sapien nulla commodo neque, auctor blandit lacus mi at lacus.  Donec et turpis vulputate mi consectetuer pellentesque. Mauris in  risus. Etiam semper tempor risus. Nunc fermentum neque quis erat  vehicula elementum. Aliquam egestas lectus ac magna accumsan varius.  Phasellus tempor euismod libero. Nunc ultrices, ante non condimentum  rutrum, sapien nulla commodo neque, auctor blandit lacus mi at lacus.  Donec et turpis vulputate mi consectetuer pellentesque. Mauris in  risus. </p>
  <p class="postinfo"> Post Info -  <a href="http://www.865171.cn">Category</a> | <a href="http://www.865171.cn">0 Comments</a></p>
 <h4>Heading 4 - Image Alignment</h4>
 Image alignments are controlled by two css classes .left and .right
 <code>http://www.865171.cnwrap http://www.865171.cnmainpage http://www.865171.cncontent .left {
	float: left;
	margin-right: 5px;
	margin-bottom: 5px;
}
</code>
<code>
http://www.865171.cnwrap http://www.865171.cnmainpage http://www.865171.cncontent .right {
	float: right;
	margin-right: 5px;
	margin-bottom: 5px;
}
</code>
<p>Etiam rutrum,  arcu quis dictum sodales, massa ligula scelerisque purus, nec ornare  massa odio imperdiet massa. Integer bibendum massa sit amet velit  bibendum cursus. Mauris mauris velit, nonummy vitae, vehicula sit amet,  sagittis rhoncus, dui. Morbi vitae tellus et nulla molestie feugiat.  Vestibulum ante ipsum primis in faucibus orci luctus et ultrices  posuere cubilia Curae; Morbi nisl sem, vulputate sit amet, convallis  eget, scelerisque id, felis. Duis mattis velit et neque. </p>

<p class="postinfo"> Post Info -  <a href="http://www.865171.cn">Category</a> | <a href="http://www.865171.cn">0 Comments</a></p>
</div>


<div id="sidebar">
<div class="sidebartop">
<h2>Categories</h2>
</div>
<div class="sidebarmain"> 
  <ul>
    <li><a href="http://www.865171.cn">Web Design</a></li>
    <li><a href="http://www.865171.cn">Programming</a></li>
    <li><a href="http://www.865171.cn">Gadgets</a></li>
    <li><a href="http://www.865171.cn">Business</a></li>
    <li><a href="http://www.865171.cn">Entertainment</a></li>
    <li><a href="http://www.865171.cn">Personal</a></li>
    <li><a href="http://www.865171.cn">Free Downloads</a></li>
  </ul>
  
 <h2>Recent Posts<span class="smalldesc">Dummy Links Not working</span></h2>
   <ul>
    <li><a href="http://www.865171.cn">Web Design</a></li>
    <li><a href="http://www.865171.cn">Programming</a></li>
    <li><a href="http://www.865171.cn">Gadgets</a></li>
    <li><a href="http://www.865171.cn">Business</a></li>
    <li><a href="http://www.865171.cn">Entertainment</a></li>
    <li><a href="http://www.865171.cn">Personal</a></li>
    <li><a href="http://www.865171.cn">Free Downloads</a></li>
  </ul>
</div>
<p class="clear2">&nbsp;</p>
<span class="sidebarbottom">&nbsp;</span>
</div>

<p class="clear"></p>



</div>


</div>
<div id="footer">
<div id="footercontent">
<p>Your Site Name &copy; All rights reserved | Valid XHTML | <a href="http://www.865171.cn">Put</a> | <a href="http://www.865171.cn">Any</a> | <a href="http://www.865171.cn">Links </a>| <a href="http://www.865171.cn">Here </a></p>
<p class="smalldesc"><a href="http://www.865171.cn">CSS Layout</a> by 865171</p>
  </div>

</div>

</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -