网页设置4行4列div tab的代码

网页设置4行4列div tab的代码,第1张

表格四行四列,代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html charset=gb2312" />

<title>网页设置4行4列div tab的代码</title>

</head>

<body>

<table width="400" border="1">

  <tr>

    <td>1</td>

    <td>2</td>

    <td>3</td>

    <td>4</td>

  </tr>

  <tr>

    <td>2</td>

    <td>&nbsp</td>

    <td>&nbsp</td>

    <td>&nbsp</td>

  </tr>

  <tr>

    <td>3</td>

    <td>&nbsp</td>

    <td>&nbsp</td>

    <td>&nbsp</td>

  </tr>

  <tr>

    <td>4</td>

    <td>&nbsp</td>

    <td>&nbsp</td>

    <td>&nbsp</td>

  </tr>

</table>

</body>

</html>

代码如下:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>用html+CSS做表格</title>

<style type="text/css">

ul{padding:0

width:324px/*设置表格宽 */

height:42px/*设置表格高*/

margin:30px

border-top:#000 1px solid/*设置表格上边框*/

border-right:#000 1px solid/*设置表格右边框*/

}

li{ border-left:#000 1px solid/*设置表格左边框*/

border-bottom:#000 1px solid/*设置表格下边框*/

/*设置单元格边框*/

list-style:none/*清除项目列表前的标记*/

float:left/*设置单元格浮动,用于水平排列*/

display:block/*设置单元格为块级元素于用语控制大小等*/

width:80px/*设置单元格宽*/

height:20px/*设置单元格高*/

text-align:center/*设置单元格内文本对齐方式*/

}

</style>

</head>

<body>

<!-- 原理就是利用项目列表的每个项目做出表格中的每个单元格,然后通过设置ul和li的边框达到设置表格的边框效果 -->

<ul>

<li>表格1</li>

<li>表格2</li>

<li>表格3</li>

<li>表格4</li>

<li>表格A</li>

<li>表格B</li>

<li>表格C</li>

<li>表格D</li>

</ul>

</body>

</html>

----希望对你有帮助 ----

-------满意采纳奥-----


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6994018.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-31
下一篇 2023-03-31

发表评论

登录后才能评论

评论列表(0条)

保存