9.6下午学习内容

Posted 2020-08-07 Strive-count

表格标签

一、<table>

    <table>代表表格标签。   <table></table>

1.width  表示表格宽度，宽度表达方式有像素和百分比两种。网页设计时如果按照像素来设计网页宽度，当网页窗口缩小时，网页大小不会随着窗口的缩小而变化，而会出现上下和左右拉伸条，以观看网站的全部内容。网站设计时如果按照百分比设计网页宽度，网页全局会随着可视窗口的变化而变化。

<table width="100%" >表示此表格宽度以百分比表达，宽度100%表示网页有多宽此表格就有多宽。

2.border   表示边框粗细    <table border="0">   表示边框宽度为零，也可理解为没有边框。

3.cellspacing  单元格的边距    <table cellspacing="0" > 边距是单元格里单元格内容与单元格外框之间的距离，如果不为0，则单元格里的内容不会触碰到单元格的边，会保持                                                                            一定距离

4.cellpadding  单元格间距    <table cellpadding="0">间距是单元格和单元格之间的距离，是单元格距离四周的单元格的垂直距离。

5.bordercolor  边框颜色  <table bordercolor="#33FFCC"> 边框颜色是单元格边框的颜色

二、<tr>   代表行

                        <table width="100%" border="0" cellspacing="0" cellpadding="0" bordercolor="#33FFCC">
                        <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                       </tr

                         <table>

                   表示1个表格有1行4列

三、<td>  代表单元格

1.width  单元格的宽度

2.height  单元格的高度

3.align  水平对齐方式  ①left左对齐    ②right右对齐  ③center居中对齐

4.valign 垂直对齐方式  ①top靠上    ②bottom靠下  ③middle中间     垂直对齐方式的居中和水平对齐方式的居中不一样。

5.rowspan 合并单元格（合并行）

                     <tr>

                     <td rowspan="2">&nbsp;</td>
                     <td>&nbsp;</td>
                     <td>&nbsp;</td>
                     <td>&nbsp;</td>
                     </tr>
                     <tr>
                     <td>&nbsp;</td>
                     <td>&nbsp;</td>
                     <td>&nbsp;</td>
                     </tr>

   上段代码表示4行4列的表格里，合并第2/3行的第1列。第2行中多出rowspan="2"，表示合并了2行，第3行相应的显示少了1个单元格。

6.colspan 合并单元格（合并列）   列的合并和行的合并原理一样。

四、<th>做表头的（第一行），一般不会用到。

 

 

今日下午将的表格感觉有点吃力，晚上练习一个网站的大概轮廓，熟悉熟悉表格。明日上自习，复习这两天学习的内容，预习后两天的内容。