html表格颜色代码怎么写

html表格颜色代码怎么写,第1张

下面的例子指定边框的颜色,和th元素的文本和背景颜色:

例<html>

<head><style>

table, td, th

{

border:1px solid green;

}

th

{

background-color:green;

color:white;

}

</style></head><body>

<table>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Savings</th>

</tr>

<tr>

<td>Peter</td>

<td>Griffin</td>

<td>$100</td>

</tr></table></body></html>

<html><title>此处是浏览器所显示的网页名字</title>

<h4>请把此行和倒数第二行删掉,只是说明一下,1到12jpg是你的名字,200是的大小,</h4>

<table border="1">

<tr>

<td><a href="1jpg" target="_blank"><img src="1jpg" width="200" height="200" /></a><p></p>说明</td>

<td><a href="2jpg" target="_blank"><img src="2jpg" width="200" height="200" /></a><p></p>说明</td>

<td><a href="3jpg" target="_blank"><img src="3jpg" width="200" height="200" /></a><p></p>说明</td>

<td><a href="4jpg" target="_blank"><img src="4jpg" width="200" height="200" /></a><p></p>说明</td>

</tr>

<tr>

<td><a href="5jpg" target="_blank"><img src="5jpg" width="200" height="200" /></a><p></p>说明</td>

<td><a href="6jpg" target="_blank"><img src="6jpg" width="200" height="200" /></a><p></p>说明</td>

<td><a href="7jpg" target="_blank"><img src="7jpg" width="200" height="200" /></a><p></p>说明</td>

<td><a href="8jpg" target="_blank"><img src="8jpg" width="200" height="200" /></a><p></p>说明</td>

</tr>

<tr>

<td><a href="9jpg" target="_blank"><img src="9jpg" width="200" height="200" /></a><p></p>说明</td>

<td><a href="10jpg" target="_blank"><img src="10jpg" width="200" height="200" /></a><p></p>说明</td>

<td><a href="11jpg" target="_blank"><img src="11jpg" width="200" height="200" /></a><p></p>说明</td>

<td><a href="12jpg" target="_blank"><img src="12jpg" width="200" height="200" /></a><p></p>说明</td>

</tr>

</table>

<marquee><h5><font color="#FF0000"> 零晨易点工作室</font></h5></marquee>

</html>

<!DOCTYPE

html

PUBLIC

"-//W3C//DTD

XHTML

10

Transitional//EN"

"

http://wwww3org/TR/xhtml1/DTD/xhtml1-transitionaldtd">

<html

xmlns="

http://wwww3org/1999/xhtml">

<head>

<meta

http-equiv="Content-Type"

content="text/html;

charset=utf-8"

/>

<title>无标题文档</title>

<style

type="text/css">

table{border-collapse:collapse;

text-align:center;

margin:0

auto}

table

tr

td{border:1px

#999

solid;

padding:5px;

width:100px}

table

header{background:#E1E1E1}

table

header:hover{text-decoration:none}

table

tr{background:#EFEFEF}

table

tr:hover{text-decoration:underline}

</style>

</head>

<body>

<table>

<caption>各网站的股票报价(来源:网易财经)</caption>

<tr

class="header">

<td>网站</td>

<td>今开</td>

<td>昨收</td>

<td>最高</td>

<td>最低</td>

<td>最新价</td>

</tr>

<tr>

<td>谷歌</td>

<td>50274</td>

<td>49996</td>

<td>50274</td>

<td>48511</td>

<td>48850</td>

</tr>

<tr>

<td>百度</td>

<td>7610</td>

<td>7419</td>

<td>7858</td>

<td>7566</td>

<td>7631</td>

</tr>

<tr>

<td>网易</td>

<td>3105</td>

<td>3036</td>

<td>3345</td>

<td>3105</td>

<td>3333</td>

</tr>

</table>

</body>

</html>

<table border="1" width="500px">

<tr>

<td colspan="5" align="center">个人简历表</td>

</tr>

<tr>

<td width="80px">姓名</td>

<td width="120px"> </td>

<td width="80px">性别</td>

<td width="120px">

<input type="radio" value="男" />男

<input type="radio" value="女" />女

</td>

<td rowspan="4" width="100px"> </td>

</tr>

<tr>

<td>出身年月</td>

<td> </td>

<td>政治面貌</td>

<td> </td>

</tr>

<tr>

<td>学历</td>

<td> </td>

<td>专业</td>

<td> </td>

</tr>

<tr>

<td>语言等级</td>

<td> </td>

<td>第二语言</td>

<td><input type="checkbox" value="英" />英

<input type="checkbox" value="日" />日

<input type="checkbox" value="法" />法</td>

</tr>

<tr>

<td>联系电话</td>

<td> </td>

<td>电子信箱</td>

<td colspan="2"> </td>

</tr>

<tr>

<td colspan="5">特长或证书</td>

</tr>

<tr>

<td colspan="5">联系地址</td>

</tr>

<tr>

<td>其他</td>

<td>qq</td>

<td> </td>

<td>msn</td>

<td> </td>

</tr>

<tr>

<td>个人主页:</td>

<td colspan="4"> </td>

</tr>

<tr>

<td colspan="4">教育背景</td>

</tr>

<tr>

<td colspan="2">

<select>

<option></option>

</select>

<select>

<option></option>

</select>

<select>

<option></option>

</select>

</td>

<td colspan="3">

最终学历

</td>

</tr>

</table>

存入<body>里面就行了

我这用记事本写的,具体格式你自己调一下就行,就是之间的距离和的宽高

<html>

    <head></head>

        <body>

    <table>

        <tr>

            <td>

                <div style="width:180px;height:220px">

                    <img style="width:160px;height:200px" alt=""                     src="3jpg">

                </div>

                <p>QQQQQQQQQQQQ</p>

                <p>qqqqqqqqqqqq</p>

            </td>

            <td>

                <div style="width:180px;height:220px">

                    <img style="width:160px;height:200px" alt=""                     src="3jpg">

                </div>

                <p>QQQQQQQQQQQQ</p>

                <p>qqqqqqqqqqqq</p>

            </td>

            <td>

                <div style="width:180px;height:220px">

                    <img style="width:160px;height:200px" alt=""                     src="3jpg">

                </div>

                <p>QQQQQQQQQQQQ</p>

                <p>qqqqqqqqqqqq</p>

            </td>

        </tr>

        <tr>

            <td>

                <div style="width:180px;height:220px">

                    <img style="width:160px;height:200px" alt=""                     src="3jpg">

                </div>

                <p>QQQQQQQQQQQQ</p>

                <p>qqqqqqqqqqqq</p>

            </td>

            <td>

                <div style="width:180px;height:220px">

                    <img style="width:160px;height:200px" alt=""                     src="3jpg">

                </div>

                <p>QQQQQQQQQQQQ</p>

                <p>qqqqqqqqqqqq</p>

            </td>

            <td>

                <div style="width:180px;height:220px">

                    <img style="width:160px;height:200px" alt=""                     src="3jpg">

                </div>

                <p>QQQQQQQQQQQQ</p>

                <p>qqqqqqqqqqqq</p>

            </td>

        </tr>

        

    </table>

    </body>

</html>

<html>

<head></head>

<body>

<table border="1">

<tr>

<td>1<table>

<tr><td>1</td></tr>

</table>

</td>

<td>2</td>

</tr>

<tr>

<td>4</td>

<td>3<table border="0">

<tr><td>3</td></tr>

</table>

</td>

</tr>

</table>

</body>

</html>

<html>

<head>

<title></title>

</head>

<body>

<!--这里开始是表格代码-->

<table border="1" width="200" height="200">

<!--1是边框的宽度 width是 表格的宽度 height是高度-->

<!--每一个<tr></tr>包含的就是一行。每个<td></td>包含的就是那一行的列-->

<tr><td>1</td><td>2</td></tr>

<tr><td>3</td><td>4</td></tr>

<tr><td>5</td><td>6</td></tr>

<tr><td>7</td><td>8</td></tr>

</table>

<!--1到8改成你想要的内容 这里是表格代码结束-->

</body>

</html>

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

原文地址:https://54852.com/bake/12177811.html

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

发表评论

登录后才能评论

评论列表(0条)

    保存