Web前端入门（六）表格_html-js-css

总目录

文章目录 1.表格1.1 表格属性1.2 表格结构标签1.3 合并单元格

1.表格 table 用来定义表格的标签tr 用来定义表格中的行，必须嵌套在标签中td 用来定义表格中的单元格，必须嵌套在标签中th 用来定义表格中的表头，表头单元格里面的内容加粗居中显示表格标题caption通常这个标题会被居中且显示于表格之上。caption 标签必须紧随 table 标签之后。这个标签只存在表格里面才有意义。

<body>
    <table>
        <tr>  <th>数字1th>     <th>数字2th>    <th>数字3th>        tr>
        <tr>  <td>1td>     <td>2td>    <td>3td>        tr>
        <tr>  <td>1td>     <td>2td>    <td>3td>        tr>
        <tr>  <td>1td>     <td>2td>    <td>3td>        tr>
    table>
body>

1.1 表格属性

表格标签的属性实际开发并不常用，因为基本都是通过后面的CSS来设置的

属性名	属性值	描述
align	left,center,right	规定表格相对周围元素的对齐方式
border	1或者’’ ‘’	规定表格单元是否拥有边框，默认为" "，表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素（即单元格文字与边框边缘的距离）
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或百分比	定表格的宽度

<table align=center border="1" cellpadding="20" cellspacing="0" width="500">

1.2 表格结构标签

为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分

用标签表示表格的头部区域，内部必须拥有标签，一般是位于第一行用标签表示表格的主体区域，主要是用于放数据本体以上标签都是放在标签中

<table align="center" border="1"cellpadding="10" cellspacing="0">
    <thead>
        <tr>
            <th>排名th>
            <th>关键词th>
            <th>趋势th>
            <th>今日搜索th>
            <th>最近七天th>
            <th>相关链接th>
        tr>
    thead>
    <tbody>
        <tr>
            <td>1td>
            <td>1td>
            <td>1td>
            <td>1td>
            <td>1td>
            <td>1td>
        tr>
    tbody>
table>

1.3 合并单元格跨行合并：rowspan=“合并单元格的个数”跨列合并：colspan="合并单元格的个数"合并的顺序按照先上后下、先左后右的顺序 ,合并完之后需要删除多余的单元格，即以优先的单元格为目标单元格（在目标单元格添加属性）。

<td colspan="2">td>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/924776.html

Web前端入门（六）表格

发表评论

评论列表（0条）