HTML day_03

HTML 表格
表格
表格由

标签来定义。每个表格均有若干行(由标签定义),每行被分割为若干单元格(由
标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
实例:

  <table border="1">
        <tr>
            <td>第一行第一列td>
            <td>第一行第二列td>
        tr>
        <tr>
            <td>第二行第一列td>
            <td>第二行第二列td>
        tr>
    table>

在这里插入图片描述
表格和边框属性
如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。
使用边框属性来显示一个带有边框的表格:我们就需要使用上面代码中使用的border=“1” 这个属性了。
表格的表头
表格的表头使用

标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本:

    <table border="1">
        <tr>
            <th>表头th>
            <th>表头th>
        tr>
        <tr>
            <td>第一行第一列td>
            <td>第一行第二列td>
        tr>
        <tr>
            <td>第二行第一列td>
            <td>第二行第二列td>
        tr>
    table>

HTML day_03_第1张图片
表格中的空单元格
在一些浏览器中,没有内容的表格单元显示得不太好。如果某个单元格是空的(没有内容),浏览器可能无法显示出这个单元格的边框。这个我看了一下我使谷歌火狐360都没啥问题的。

HTML中的占位符:

 

没有边框的表格

表头 表头
第一行第一列 第一行第二列
第二行第一列 第二行第二列
第三行第一列

HTML day_03_第2张图片
带有标题的表格:

 <table border="2">
        <caption>测试标题caption>
        <tr>
            <td>小白兔td>
            <td>大灰狼td>
        tr>
        <tr>
            <td>大白象td>
            <td>小猴子td>
        tr>
    table>

HTML day_03_第3张图片
带有跨行或者跨列的表格

<table border="1">
        <caption>横跨两列的表格caption>
        <tr>
            <th>姓名th>
            <th colspan="2">电话th>
        tr>
        <tr>
            <td>高俅td>
            <td>13776892543td>
        tr>
    table>
    <table border="1">
        <caption>横跨两行的表格caption>
        <tr>
            <th>姓名th>
            <td>高俅td>
        tr>
        <tr>
            <th rowspan="2">电话th>
            <td >13776892543td>
        tr>
        <tr>
            <td >13976892543td>
        tr>
    table>

HTML day_03_第4张图片
单元格内含表格以及列表等

<table border="1">
        <caption>表格内含表格caption>
        <tr>
            <td>
                <P>这里是一个段落P>
                <P>再来一个一个段落P>
            td>
            <td>
                这个单元格这个里面还有一个单元格哦
                <table border="1">
                    <tr>
                        <td>Atd>
                        <td>btd>
                    tr>
                    <tr>
                        <td>Ctd>
                        <td>Dtd>
                    tr>
                table>
            td>
        tr>
        <tr>
            <td>
                这个单元格里面包含一个无须列表哦!
                <ul>
                    <li>大鸭梨li>
                    <li>小苹果li>
                    <li>大橘子li>
                ul>
            td>
            <td>
                HRLLO HTML TABLE XIXI
            td>
        tr>
    table>

HTML day_03_第5张图片
单元格边距

<table border="1">
        <caption>没有使用cellspadding的表格caption>
        <tr>
            <td>第一行第一列td>
            <td>第一行第二列td>
        tr>
        <tr>
            <td>第二行第一列td>
            <td>第二行第二列td>
        tr>
    table>
    <table border="1" cellpadding="10">
        <caption>使用cellspadding的表格caption>
        <tr>
            <td>第一行第一列td>
            <td>第一行第二列td>
        tr>
        <tr>
            <td>第二行第一列td>
            <td>第二行第二列td>
        tr>
    table>

HTML day_03_第6张图片
表格使用背景颜色以及背景图片

 <table border="1" bgcolor="#ff7f50">
        <caption>带有背景颜色的表格caption>
        <tr>
            <td>盖伦td>
            <td>皇子td>
        tr>
        <tr>
            <td>蛮王td>
            <td>鳄鱼td>
        tr>
    table>
    <table border="1" background="xha.jpg">
        <caption>带有背景图片的表格caption>
        <tr>
            <td>盖伦td>
            <td>皇子td>
        tr>
        <tr>
            <td>蛮王td>
            <td>鳄鱼td>
        tr>
    table>

HTML day_03_第7张图片
单元格添加背景颜色以及背景图片

 <table border="1">
        <tr>
            <td bgcolor="#8a2be2">小了白了兔白了又了白td>
        tr>
        <tr>
            <td background="xha.jpg">小了白了兔白了又了白td>
        tr>
    table>

在这里插入图片描述
设置单元格内容对齐方式

<h3>设置单元格内容对齐方式h3>
    <table width="400" border="1">
        <tr>
            <th align="left">消费项目....th>
            <th align="right">一月th>
            <th align="right">二月th>
        tr>
        <tr>
            <td align="left">衣服td>
            <td align="right">$241.10td>
            <td align="right">$50.20td>
        tr>
        <tr>
            <td align="left">化妆品td>
            <td align="right">$30.00td>
            <td align="right">$44.45td>
        tr>
        <tr>
            <td align="left">食物td>
            <td align="right">$730.40td>
            <td align="right">$650.00td>
        tr>
        <tr>
            <th align="left">总计th>
            <th align="right">$1001.50th>
            <th align="right">$744.65th>
        tr>
    table>

HTML day_03_第8张图片

列表

无序列表
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。
无序列表始于

    标签。每个列表项始于
  •  <ul>
            <li>javali>
            <li>pythonli>
            <li>cli>
            <li>c++li>
        ul>
    

    HTML day_03_第9张图片
    有序列表
    同样,有序列表也是一列项目,列表项目使用数字进行标记。
    有序列表始于

      标签。每个列表项始于
    1. 标签。

       <ol>
              <li>javali>
              <li>pythonli>
              <li>cli>
              <li>c++li>
          ol>
      

      HTML day_03_第10张图片
      自定义列表
      自定义列表不仅仅是一列项目,而是项目及其注释的组合。
      自定义列表以

      标签开始。每个自定义列表项以
      开始。每个自定义列表项的定义以
      开始。

       <dl>
              <dt>编程语言dt>
              <dd>javadd>
              <dd>pythondd>
              <dd>cdd>
              <dd>c++dd>
          dl>
      

      HTML day_03_第11张图片
      嵌套列表

      <ul>
              <li>西瓜li>
              <li>水果li>
                  <ul>
                      <li>苹果li>
                      <li>大鸭梨li>
                  ul>
              <li>酸奶li>
                  <ul>
                      <li>安慕希li>
                      <li>纯甄li>
                  ul>
          ul>
      

      HTML day_03_第12张图片
      HTML day_03_第13张图片

      你可能感兴趣的:(前端)