web前端之tab表格布局(四)----表格布局


<html>
  <head>
    <title>tab1.htmltitle>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    

  head>

  <body>
    <p>
每个表格从一个 table 标签开始。 
每个表格行从 tr 标签开始。
每个表格的数据从 td 标签开始。
border代表的意思是表格线的宽度
p>

<h4>一列:h4>
<table border="1">
<tr>
  <td>100td>
tr>
table>

<h4>一行三列:h4>
<table border="1">
<tr>
  <td>100td>
  <td>200td>
  <td>300td>
tr>
table>

<h4>两行三列:h4>
<table border="1">
<tr>
  <td>100td>
  <td>200td>
  <td>300td>
tr>
<tr>
  <td>400td>
  <td>500td>
  <td>600td>
tr>
table>

<h4>两行三列:h4>
<table border="1">
<tr>
  <td>100td>
  <td>200td>
  <td>300td>
tr>
<tr>
  <td>400td>
  <td>500td>
  <td>600td>
tr>
table>
<h4>三行三列h4>
<table border="2">
    <tr>
    <td>用户名td>
    <td>密码td>
    <td>性别td>
    tr>
    <tr>
    <td>年龄td>
    <td>邮箱td>
    <td>手机号td>
    tr>
    <tr>
    <td>出生年月td>
    <td>毕业院校td>
    <td>毕业时间td>
    tr>
table>
  body>
html>

<html>
  <head>
    <title>tab1.htmltitle>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    

  head>

  <body>
  <p>
    没有边框的表格的两种表现形式
  p>
  <h4>这个表格没有边框:h4>
<table>
<tr>
  <td>100td>
  <td>200td>
  <td>300td>
tr>
<tr>
  <td>400td>
  <td>500td>
  <td>600td>
tr>
table>

<h4>这个表格没有边框:h4>
<table border="0">
<tr>
  <td>100td>
  <td>200td>
  <td>300td>
tr>
<tr>
  <td>400td>
  <td>500td>
  <td>600td>
tr>
table>
  body>
html>

<html>
<head>
<title>tab1.htmltitle>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">



head>

<body>
    <p>
    th表格的头
    有垂直以及水平的
    p>
    <h4>水平标题:h4>
    <table border="1">
        <tr>
            <th>Nameth>
            <th>Telephoneth>
            <th>Telephoneth>
        tr>
        <tr>
            <td>Bill Gatestd>
            <td>555 77 854td>
            <td>555 77 855td>
        tr>
    table>

    <h4>垂直标题:h4>
    <table border="1">
        <tr>
            <th>First Name:th>
            <td>Bill Gatestd>
        tr>
        <tr>
            <th>Telephone:th>
            <td>555 77 854td>
        tr>
        <tr>
            <th>Telephone:th>
            <td>555 77 855td>
        tr>
    table>
    <h4>综合:h4>
    <table border="1">
        <tr>
            <th>th>
            <th>Telephoneth>
            <th>Telephoneth>
        tr>
        <tr>
            <th>First Name:th>
            <td>Bill Gatestd>
        tr>
        <tr>
            <th>Telephone:th>
            <td>555 77 854td>
        tr>
        <tr>
            <th>Telephone:th>
            <td>555 77 855td>
        tr>
    table>
body>
html>

<html>
<head>
<title>tab1.htmltitle>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">



head>

<body>
<p>
    带有标题的表格
    caption标题标签
p>
    <table border="1">
  <caption>Monthly savingscaption>
  <tr>
    <th>Monthth>
    <th>Savingsth>
  tr>
  <tr>
    <td>Januarytd>
    <td>$100td>
  tr>
  <tr>
    <td>Februarytd>
    <td>$50td>
  tr>
table>

body>
html>

<html>
<head>
<title>tab1.htmltitle>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">



head>

<body>
<p>
    跨行跨列的表格单元格
    th 属性 colspan跨两行
    th 属性 rowspan跨两列
p>
<h4>单元格跨两格:h4>
<table border="1">
<tr>
  <th>Nameth>
  <th colspan="2">Telephoneth>
tr>
<tr>
  <td>Bill Gatestd>
  <td>555 77 854td>
  <td>555 77 855td>
tr>
table>
​
<h4>单元格跨两列:h4>
<table border="1">
<tr>
  <th>First Name:th>
  <td>Bill Gatestd>
tr>
<tr>
  <th rowspan="2">Telephone:th>
  <td>555 77 854td>
tr>
<tr>
  <td>555 77 855td>
tr>
table>
​
body>
html>

<html>
<head>
<title>tab6.htmltitle>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

head>
<body>
    <p>表格的复杂形式,表格中添加复杂的元素 例如:表格嵌套表格,表格嵌套列表等复杂的元素
        ul是列表,li无序列表
        tr 行
    p>
    <table border="1">
        <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>applesli>
                    <li>bananasli>
                    <li>pineapplesli>
                ul>td>
            <td>HELLOtd>
        tr>
    table>
body>
html>

<html>
<head>
<title>tab7.htmltitle>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">



head>

<body>
    <p>
        table cellpadding表格的属性内边距
                        默认是没有边距的
    p>
    <h4>没有单元格边距:h4>
    <table border="1">
        <tr>
            <td>Firsttd>
            <td>Rowtd>
        tr>
        <tr>
            <td>Secondtd>
            <td>Rowtd>
        tr>
    table>

    <h4>有单元格边距:h4>
    <table border="1" cellpadding="10">
        <tr>
            <td>Firsttd>
            <td>Rowtd>
        tr>
        <tr>
            <td>Secondtd>
            <td>Rowtd>
        tr>
    table>

body>
html>

<html>
<head>
<title>tab7.htmltitle>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">



head>

<body>
    <p>
        table cellspacing外边距
    p>
    <h4>没有单元格间距:h4>
<table border="1">
<tr>
  <td>Firsttd>
  <td>Rowtd>
tr>
<tr>
  <td>Secondtd>
  <td>Rowtd>
tr>
table>

<h4>单元格间距="0":h4>
<table border="1" cellspacing="0">
<tr>
  <td>Firsttd>
  <td>Rowtd>
tr>
<tr>
  <td>Secondtd>
  <td>Rowtd>
tr>
table>

<h4>单元格间距="10":h4>
<table border="1" cellspacing="10">
<tr>
  <td>Firsttd>
  <td>Rowtd>
tr>
<tr>
  <td>Secondtd>
  <td>Rowtd>
tr>
table>

body>
html>

你可能感兴趣的:(html)