HTML tableLOGIN

HTML table

HTML table

HTML table

Table is defined by <table> tag. Each table has a number of rows (defined by <tr> tags), and each row is divided into a number of cells (defined by <td> tags). The letters td refer to table data, the contents of data cells. Data cells can contain text, pictures, lists, paragraphs, forms, horizontal lines, tables, and more.

Table example

<table border="1">
 <tr>
 <td>row 1, cell 1</td>
 <td>row 1, cell 2</td>
 </tr>
 <tr>
 <td>row 2, cell 1</td>
 <td>row 2, cell 2</td>
 </tr>
 </table>

HTML table and border attributes

If the border attribute is not defined, the table will not display the border. Sometimes this is useful, but most of the time, we want the border to show.

Use the border attribute to display a table with a border:

<table border="1">
 <tr>
 <td>Row 1, cell 1</td>
 <td>Row 1, cell 2</td>
 </tr>
 </table>

HTML table header

The header of the table is defined using the <th> tag.

Most browsers will display the table header as bold and centered text:

<html>
<head>
<table border="1">
 <tr>
 <th>Header 1</th>
 <th>Header 2</th>
 </tr>
 <tr>
 <td>row 1, cell 1</td>
 <td>row 1, cell 2</td>
 </tr>
 <tr>
 <td>row 2, cell 1</td>
 <td>row 2, cell 2</td>
 </tr>
 </table>
 </head>
 </html>
举个例子:
<html>
<head>
<meta charset="utf-8">
    <title>无标题页</title>
    <style type="text/css">
        .tb
        {
         border-width:1px;
         border-collapse:collapse;
         border-color:black;
         border-style:solid;
        }
        td
        {
         border-width:1px;
         border-collapse:collapse;
         border-color:black;
         border-style:solid;
        }
    </style>
</head>
<body>
    <div>
    <table width="600" height="400" border="1">
     <tr>
      <td colspan="3"></td>
     </tr>
      <tr>
       <td rowspan="3"></td>
       <td> </td>
       <td> </td>
     </tr>
      <tr>
       <td> </td>
       <td> </td>
     </tr>
     <tr>
       <td> </td>
       <td> </td>
     </tr>
    </table>
    </div>
</body>
</html>

HTML table tag


##Tag                                                                                                                                                                                                

##<table>                                                                                                                                                                                                                                                                                                                                          Define the table cell

<caption>                                                            .                                                                                                                                                         -- defined

#<thead>                                                                 Define the header of the table                                                      Define the footer of the table

Next Section
<html> <head> <table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> </head> </html> 举个例子: <html> <head> <meta charset="utf-8"> <title>无标题页</title> <style type="text/css"> .tb { border-width:1px; border-collapse:collapse; border-color:black; border-style:solid; } td { border-width:1px; border-collapse:collapse; border-color:black; border-style:solid; } </style> </head> <body> <div> <table width="600" height="400" border="1"> <tr> <td colspan="3"></td> </tr> <tr> <td rowspan="3"></td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> </div> </body> </html>
submitReset Code
ChapterCourseware