table布局

雨点打透心脏的1/2处 2022-06-12 02:07 193阅读 0赞

**1.table布局**  
![这里写图片描述][SouthEast]  
布局：网页结构清晰  
结构特点：规范一致，从上到下，从左到右每一行每一列高度工整

<table width="100%">
        <tr>
            <td style="height: 150px;background-color: green"colspan="3"></td>
        </tr>
        <tr>
            <td style="width: 150px;;height: 300px;background-color: chartreuse;"></td>
            <td style="width:700px;background-color: lawngreen "></td>
            <td style="width:150px;background-color: olivedrab"></td>
        </tr>
        <tr>
            <td style="height: 200px;background-color: greenyellow;"colspan="3"></td>
        </tr>
    </table>

页面的布局可以使用table来实现，一个单元格就是一个布局区域。这个区域的大小可以用width和height来调整，位置是通过单元格的相对位置来体现的，同时可以结合colspan和rowspan来完成单元格的合并。  
当布局比较复杂我们可以先自己划分几个大块再分小块 使用table的嵌套来解决，在大块里面嵌入一个小块进行划分  
**2.div**  
定义一个区域

<div style="border:dashed;width:100px;height:100px;">sss</div>

它是一个块级标签他会占满一行  
标签总结  
1.块级标签：  
占满一行在新的一行显示  
div、h1-h6、p、hr、table、ul、ol、dl、tr、option、caption、dd、dl  
2.内联标签  
跟块级标签相反 不会在新的一行显示  
img、input、a、td、th、textarea、span、label、select、button  
块级标签占满行 内联标签比较省空间  
`<h1>`利于搜索 用于各大网页的名称

[SouthEast]: /images/20220612/1e52cb85048947109c354f81162764b5.png

发表评论取消回复

表情：

评论列表（有 0 条评论，193人围观）

还没有评论，来说两句吧...

相关阅读

相关 2017-12-04HTML table布局

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

素颜马尾好姑娘i/ 2023年06月11日 07:28/ 0 赞/ 13 阅读

相关 html5 table 教程,html5 div布局与table布局详解

本文实例为大家解析了html5 div布局与table布局，供大家参考，具体内容如下 div布局：html+css实现简单布局。 \container中height不能写成

╰半夏微凉°/ 2022年10月06日 10:48/ 0 赞/ 203 阅读

相关 04-HTML-加强-table布局

HTML的加强 1. <a ... target=""> ① \_self ② \_blank ③ \_parent ④ frame\_n

柔光的暖阳◎/ 2022年09月18日 01:56/ 0 赞/ 168 阅读

相关列表块 div和table布局

列表 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

野性酷女/ 2022年08月20日 06:17/ 0 赞/ 175 阅读

相关 html -- div table布局 -- 加布局简单例子

div布局，div.html： <!DOCTYPE html> <html> <head> <meta name="generat

快来打我*/ 2022年07月18日 00:25/ 0 赞/ 228 阅读

相关布局神器display:table-cell

转载自：[http://www.520ued.com/article/table-cell][http_www.520ued.com_article_table-cell]

偏执的太偏执、/ 2022年07月15日 13:49/ 0 赞/ 186 阅读

相关 table布局

1.table布局 ![这里写图片描述][SouthEast] 布局：网页结构清晰结构特点：规范一致，从上到下，从左到右每一行每一列高度工整 <tabl

雨点打透心脏的1/2处/ 2022年06月12日 02:07/ 0 赞/ 194 阅读

相关 css布局：table布局、两栏布局、三栏布局

一、最初的布局——table 最初的时候，网页简单到可能只有文字和链接。这时候，大家最常用的就是table。因为table可以展示出多个块的排布。这种布局现在应该不常用了

小咪咪/ 2022年06月07日 02:17/ 0 赞/ 449 阅读

相关 HTML/CSS -- 利用table进行布局

cssTable布局：[table布局][table] 布局1：高度固定，左边宽度固定，右边自适应 ![20181228161132679.png][] <sty

亦凉/ 2022年04月10日 07:19/ 0 赞/ 435 阅读

相关 css table布局介绍

table表格控件可以通过table-layout属性来设置其布局，该属性有三个值：auto、fixed。 auto：默认行为，表格及单元格的宽度取决于其包含的内容，不

骑猪看日落/ 2021年05月12日 11:50/ 0 赞/ 536 阅读