当前位置:首页 > 网站建设 > 正文内容

HTML表格布局网页设计(html表格页面设计)

网站建设2年前 (2023-03-20)1323

本篇文章给大家谈谈HTML表格布局网页设计,以及html表格页面设计对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。

本文目录一览:

用HTML语言做一个表格

html做个表格的步骤如下:

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

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

table

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

tr

th语文/th

td7:00-7:40/td

td7:50-8:30/td

/tr

tr

th数学/th

td7:00-7:40/td

td7:50-8:30/td

/tr

tr

th英文/th

td7:00-7:40/td

td7: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、预览结果如下所示,一个简单的表格就制作出来了。

html表格布局问题

如果你一定要用table去实现,就是大量的table标签嵌套table,然后不断的嵌套,针对每个单元格、标签进行控制

然后提一句,从2007年开始,整个前端开发(HTML5开发)、网页制作的制作规范,行业当中就是使用HTML+CSS的模式进行(也称为DIV+CSS),其原因在于table的语义性、可维护性都比较差,从语义的角度来说,table是表格,也就是呈现数据的数据表,并非网页布局的东西。

对于很多学校、大学的官网,由于是2005年左右的一系列产品,所以,会采用table的布局方式。如果你是在制作学校的某一个网页,在维护学校,那你没的选择,只能按我第一段说的那么去操作,虽然麻烦~如果你是在自学HTML和CSS,在拿学校的页面做练习,那么一定以“行业规范”为准,选择好的合适的书籍辅助学习。

html表格布局

DW就是这点烦人,所以不喜欢用它。

建议你不要使用表格布局,用设计布局,先画一个足够大的TABLE,然后先画第一列,宽和高都画得比图片大,然后插入图片,再调整单元格大小到图片大小。

意思也就是说,如果你先定义好宽窄,DW会根据内容自动调整,因此会改变排版。所以你先画一个足够大的单元格,先将内容加进去,再来改变单元格的大小。

HTML表格布局网页设计的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于html表格页面设计、HTML表格布局网页设计的信息别忘了在本站进行查找喔。

扫描二维码推送至手机访问。

版权声明:本文由飞速云SEO网络优化推广发布,如需转载请注明出处。

本文链接:http://chlfg.com/post/13140.html

分享给朋友:

“HTML表格布局网页设计(html表格页面设计)” 的相关文章

长春网站建设模板制作(长春在线制作网站)

长春网站建设模板制作(长春在线制作网站)

本篇文章给大家谈谈长春网站建设模板制作,以及长春在线制作网站对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、网站建设方案 2、新手自己如何制作网页最简单的方法 3、企业网站建设应该遵循哪些原则 4、长春建网站比较细致,可以根据自己意思设计的到那去? 5、长...

用dw制作个人网站(dw制作个人网站代码)

用dw制作个人网站(dw制作个人网站代码)

本篇文章给大家谈谈用dw制作个人网站,以及dw制作个人网站代码对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、dreamweaver怎么做一个简单的网页 2、DW怎么做个人主页 3、怎样用DW制作一个简单的网站,并且能发布到网上,详细步骤,请大师指点 4、如何...

华为官网CSS代码(华为css配置命令)

华为官网CSS代码(华为css配置命令)

今天给各位分享华为官网CSS代码的知识,其中也会对华为css配置命令进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、华为是什么股票代码 2、华为CSS和思科VSS的有什么区别? 3、华为手机代码########什么意思? 4、华为手表代码 5...

个人博客网页设计html动漫(html动漫网页设计作品及代码)

个人博客网页设计html动漫(html动漫网页设计作品及代码)

本篇文章给大家谈谈个人博客网页设计html动漫,以及html动漫网页设计作品及代码对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、求一个简单的个人网页html模板 2、求一份HTML个人网页设计作业(像个人博客那样 3、怎么用html5制作个人主页 4、个人网...

Word如何复制模板(word怎样复制模板)

Word如何复制模板(word怎样复制模板)

本篇文章给大家谈谈Word如何复制模板,以及word怎样复制模板对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、复制框架模板怎么复制 2、word如何复制模版 3、怎样在word中提取模板 4、如何将一个word中的格式复制到另一个文档 复制框架模板怎么复制...

倒计时小视频10秒模板下载(倒计时小视频5秒模板)

倒计时小视频10秒模板下载(倒计时小视频5秒模板)

今天给各位分享倒计时小视频10秒模板下载的知识,其中也会对倒计时小视频5秒模板进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、免费倒计时视频素材下载 2、公司年会,想要一个两分钟的倒计时视频素材 3、求电脑高手做一小段视频,有创意了,只差技术了(晚会...