2.4 表格与图片

表格

标题位置擦caption-side

属性值	说明
top	顶部（默认）
botton	底部

---

语法：

table
{
    caption-side:botton;
}

表格边框

合并border-collapse

属性值	说明
separate	有空隙（默认）
collapse	无空隙

---

table
{
    border-collapse:collapse;
}

间距border-spacing

table
{
    border-spacing:20px;<--!表示间距为20个像素-->
}

---

图片

大小

img
{
    width:20px;(宽度)
    height:20px;(高度)
}

边框

img
{
    border:1px solid red;
}

对齐

水平对齐text-align

在使用水平对齐的时候，最好拿吧图片放在div中，因为水平对齐是图片左右移动，他需要一个移动的范围。同时div的范围要比图片大，不然移动个屁。

属性值	说明
left	左对齐
center	居中对齐
right	右对齐

---

.div1
{
    text-align:center;
}
​
……
​
<div class="div1">
<img ……/>
</div>

垂直对齐vertical-align

属性值	说明
top	顶部对齐
middle	中部对齐
bottom	底部对齐
baseline	基线对齐

img
{
    vertical-align:middle;
}

文字环绕float

属性值	说明
left	文字向左浮动
right	元素向右浮动

---

img
{
    border-right: 20px solid white;(让文字与图片有一定的间距)
    float:left;
}

---

##