html做个表格代码

作者&投稿:博逸 (若有异议请与网页底部的电邮联系)
用HTML语言做一个表格~

html做个表格的步骤如下:
1、首先新建一个html,点击中间,先填入表格内容;

2、内容根据需求来写即可,示例代码如下:

功课表

语文
7:00-7:40
7:50-8:30


数学
7:00-7:40
7:50-8:30


英文
7:00-7:40
7:50-8:30



3、然后在中间输入样式表的样式;

4、样式也根据个人的需求来设置即可,设置单元格的宽度高度,合并单元格,位置,颜色等等,示例代码如下:

body
{
width:340px;
height :800px;
}
table
{
border-collapse :collapse ;
}
th,td
{
width:100px;
height:40px;
border :1px solid black;
font-size:12px;
text-align :center;
}


5、这里需要注意这个代码“table”的意义是将表格边框合并为单一的边框,将相邻变合并。

6、预览结果如下所示,一个简单的表格就制作出来了。

你是用什么软件做。是要做动态网页吗?动态网页。需要写代码,还需要数据库;
你做静态的,劝你,删点图片。或,在将你的页面,重新复制一份,将放不下的图片,放在第二张页面上。分页上自己设连接,效果和翻页一样。

html做个表格的步骤如下:

1、首先新建一个html,点击<body></body>中间,先填入表格内容;

2、内容根据需求来写即可,示例代码如下:

<table>

<p style="text-align:center ">功课表</p>

<tr>

<th>语文</th>

<td>7:00-7:40</td>

<td>7:50-8:30</td>

</tr>

<tr>

<th>数学</th>

<td>7:00-7:40</td>

<td>7:50-8:30</td>

</tr>

<tr>

<th>英文</th>

<td>7:00-7:40</td>

<td>7:50-8:30</td>

</tr>

</table>

3、然后在<head></head>中间输入样式表的样式;

4、样式也根据个人的需求来设置即可,设置单元格的宽度高度,合并单元格,位置,颜色等等,示例代码如下:

<style type="text/css">

body

{

width:340px;

height :800px;

}

table

{

border-collapse :collapse ;

}

th,td

{

width:100px;

height:40px;

border :1px solid black;

font-size:12px;

text-align :center;

}     

</style>

5、这里需要注意这个代码“table”的意义是将表格边框合并为单一的边框,将相邻变合并。

6、预览结果如下所示,一个简单的表格就制作出来了。



表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

实战操作150×150的htlm表格代码

效果图:

扩展资料:mozilla  HTML 表格 入门



html制作表格的代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style>

body{background:#ddd;}  

td{width:150px;height:150px;text-align: center;} 

</style> 

</head>

<body>

<table border="1">

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

<td>row 1, cell 3</td>

<td>row 1, cell 4</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

<td>row 2, cell 3</td>

<td>row 2, cell 4</td>

</tr>

<tr>

<td>row 3, cell 1</td>

<td>row 3, cell 2</td>

<td>row 3, cell 3</td>

<td>row 3, cell 4</td>

</tr>

<tr>

<td>row 4, cell 1</td>

<td>row 4, cell 2</td>

<td>row 4, cell 3</td>

<td>row 4, cell 4</td>

</tr>

</table>

</body>

</html>

效果:


拓展资料

html表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由
<td> 标签定义)。字母 td 指表格数据(table
data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border="1">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>

如果不定义边框属性,表格将不显示边框。



一楼的回答表格基本上是生成了。但会造成表格在浏览器中无法看见,所以还要在每个<td></td>之间添加一个空格符 -&-n-b-s-p-;-
同时增加背景色和表格边框色:

<table width="600" border="1" bordercolor="green" cellspacing="0" cellpadding="0" bgcolor="yellow">
<tr>
<td width="150" height="150">-&-n-b-s-p-;-
</td>
<td>-&-n-b-s-p-;-
</td>
<td>-&-n-b-s-p-;-
</td>
<td>-&-n-b-s-p-;-
</td>
</tr>
<tr>
<td height="150">-&-n-b-s-p-;-
</td>
<td>-&-n-b-s-p-;-
</td>
<td>-&-n-b-s-p-;-
</td>
<td>-&-n-b-s-p-;-
</td>
</tr>
<tr>
<td height="150">-&-n-b-s-p-;-
</td>
<td>-&-n-b-s-p-;-
</td>
<td>-&-n-b-s-p-;-
</td>
<td>-&-n-b-s-p-;-
</td>
</tr>
<tr>
<td height="150">-&-n-b-s-p-;-
</td>
<td>-&-n-b-s-p-;-
</td>
<td>-&-n-b-s-p-;-
</td>
<td>-&-n-b-s-p-;-
</td>
</tr>
</table>

注:实际代码中请把-&-n-b-s-p-;-
中的-去掉,因为这里去掉的话提交的回答也以为是空格了。
bordercolor为边框色,这里为绿色,你可自己更改,bgcolor背景色为黄色,所有颜色也可以用#FF00FF这样的颜色代码表示。

<table width="600" border="1" bordercolor="green" cellspacing="0" cellpadding="0" bgcolor="yellow">
<tr>
<td width="150" height="150">-&-n-b-s-p-;-
</td>
<td>-&-n-b-s-p-;-
</td>
<td>-&-n-b-s-p-;-
</td>
<td>-&-n-b-s-p-;-
</td>
</tr>
<tr>
<td height="150">-&-n-b-s-p-;-
</td>
<td>-&-n-b-s-p-;-
</td>
<td>-&-n-b-s-p-;-
</td>
<td>-&-n-b-s-p-;-
</td>
</tr>
<tr>
<td height="150">-&-n-b-s-p-;-
</td>
<td>-&-n-b-s-p-;-
</td>
<td>-&-n-b-s-p-;-
</td>
<td>-&-n-b-s-p-;-
</td>
</tr>
<tr>
<td height="150">-&-n-b-s-p-;-
</td>
<td>-&-n-b-s-p-;-
</td>
<td>-&-n-b-s-p-;-
</td>
<td>-&-n-b-s-p-;-
</td>
</tr>
</table>

注:实际代码中请把-&-n-b-s-p-;-
中的-去掉,因为这里去掉的话提交的回答也以为是空格了。
bordercolor为边框色,这里为绿色,你可自己更改,bgcolor背景色为黄色,所有颜色也可以用#FF00FF这样的颜色代码表示。


插入表格的HTML代码是什么啊?
<table>---标记为表格开始 <tr>---标记某行的开始处 <td><\/td>--此处为一个单元格 成对使用<td><\/td> <\/tr> 本行的结束处<\/table>---表格结束处本例是一行二列的表格。能看明白吧

用代码写如下表格,HTML?
具体的代码可以参考下面这个:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<\/title> <style> div{ width: 500px;...

如何用html语言创建纵向表头表格
html制作表格的代码:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title><\/title> <style> body{background:#ddd;} td{width:150px;height:150px;text-align: center;} <\/style> <\/head> <body> <table border="1"> <tr> <td>row 1, cell 1<\/td> <td>row 1, ...

如何使用HTML 中的表格代码table,tr,td
在一些浏览器中,没有内容的表格单元显示得不太好。如果某个单元格是空的(没有内容),浏览器可能无法显示出这个单元格的边框。注意:这个空的单元格的边框没有被显示出来。为了避免这种情况,在空单元格中添加一个空格占位符,就可以将边框显示出来。6 以下就是所有的表格标签,我们可以逐个加到代码...

用表格和表单制作如下网页。完整html代码
1、使用标签<table><\/table>定义网页的表格,使用style赋值类型将显示在网页。2、使用<tr>标签定义行,使用<th>定义表头,表头的文字自动加粗。3、<tr>和<td>标签配合,定义每行中的表格数量,现在定义3行5列的表格。4、使用<caption><\/caption>定义表格的标题。5、表格分为三个部分,表头部,表主体,...

html不规则表格做法
两条建议:1、考虑用多个table来拼接,如果下面一行中的列与上面一行的列对齐的,则用一个table,不相同的地方,把外层单元格合并,内层加一个table,设置内层table的列宽,以达到要求。2、考虑用div+css模拟这种不规则表格。

求html表格的代码
效果是这样的,除了表格的数据的一些背景颜色,没给你调,其他的应该是一模一样吧,边框颜色可能有点差别,自己细调吧,我直接用的255的绿色。效果是下面这样的:实际效果和你要的效果应该差别不大 代码其实就是最基础的表格样式做的。代码如下:<!DOCTYPE html> <html> <head> <style> tr.title ...

帮我用HTML做个表格,谢谢
<html> <head> <meta charset="UTF-8"> <title>表格<\/title> <style> tr { height: 40px; } td { width: 200px; } <\/style><\/head> <body><h2>表格<\/h2><table cellpadding="0" cellspacing="0" border="1px"> <tr> <td colspan="3">40 ...

如何创建HTML表格
本篇解答一下在浏览一些网站时经常会用到的一种网页元素--表单。如下图,想必大家已经再熟悉不过了,像这样允许用户输入并使用按钮提交信息的功能,我们称之为表单,那么接下来为大家介绍HTML表单相关的一些知识点,希望对大家有所帮助。1)表单:帮助服务器收集客户端信息的一种机制 <form action="提交到...

html,为网页建立一个2行3列的简单表格。表格宽度为网页的50%,表格高 ...
<table border="0" cellspacing="0" cellpadding="0" style="width:50%; text-align:center; height:100px;"> <tr> <td> <\/td> <td> <\/td> <td> <\/td> <\/tr> <tr> <td> <\/td> <td> <\/td> <td> <\/td> <\/tr> <\/table> ...

奉化市19460123308: 超文本标记语言(标准通用标记语言下的应用) - 搜狗百科
才旦蚂小眉: 就是用css写盒子,你把宽高固定了,设置浮动就好了.先是上中下三个盒子;中间的盒子分为左右两部分;右边的又分为上下两部分,上下两部分又分别分为左右两部分

奉化市19460123308: HTML 代码表示表格 -
才旦蚂小眉: 一行一列 <table><tr><td>此处输入单元格内容</td></tr> </table> 一行两列 <table><tr><td>此处输入单元格内容1</td><td>此处输入单元格内容2</td></tr> </table> 两行一列<table><tr><td>此处输入单元格内容1</td></tr><tr><td>此处输入单元格内容2</td></tr> </table> 此外 在<table> 或<td>中加入 align="center" 分别表示表格整体居中或单元格内容居中 还有更多相关代码,就不一一列举,可到我空间 留言详细介绍.

奉化市19460123308: 如何用html编写表格 -
才旦蚂小眉: 楼主你好.html编写表格的方法有多种.1. 最简单的就是用html标签<table></table> 表格是由表头,表格,表行组成的.表头<tt></tt> 表行<tr></tr> 表格<td></td> 表头和表格都是放在表行里面的.下面假设写一个2行1列的表格2. <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Table</title></head><body> <table> <tr><th>第一行</th></tr> <tr><td>第二行</td></tr> </table></body></html>

奉化市19460123308: 谁知道html语言的表格代码怎么编写 -
才旦蚂小眉: HTML表格用<table>表示.一个表格可以分成很多行(row),用<tr>表示;每行又可以分成很多单元格(cell),用<td>表示. 这三个Tag是创建表格最常用的Tag.http://www.admin5.com/html/html_tutorials/025_HTML_tables.html 这个网址有表格代码编写详细介绍,你进去看看吧!!

奉化市19460123308: html中怎样用代码写一个表格
才旦蚂小眉: 可以这样: <style type="text/css"> <!-- .style2 {font-size: 5pt} --> </style> <table width="500" border="1" align="center" cellpadding="0" cellspacing="0"> <tr align="center" valign="middle"> <td colspan="3"><span class="...

奉化市19460123308: 如何在网页中用HTML代码插入表格? -
才旦蚂小眉: 这个只要你记住相关的标记就可以了. 记事本写入相复关的HTML代码即可,插入表格是在网页的内容中插入即可. <html> <head> <title>网页标题</title> </head><body> (网页内容)</body><html>标记属性大多都制是双标记,即:有开头...

奉化市19460123308: 用html怎么做表格? -
才旦蚂小眉: <body><table><tr><td>标题</td><td colspan="3"><input type="text" /></td></tr><tr><td>留言者</td><td><input type="text" /></td><td>性别</td><td><input type="text" /></td></tr><tr><td>邮箱</td><td><input type="text...

奉化市19460123308: HTML语言表格代码 -
才旦蚂小眉: <table width="90%" border="2" cellpadding="2" cellspacing="2" bordercolor="#FF0000" align="center"> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&...

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 星空见康网