web前端学习（⼋）——HTML5中表格、边框的相关标签设置1.HTML中表格边框的相关标签
①表格由 <table> 标签来定义。
②每个表格均有若⼲⾏（由 <tr> 标签定义），每⾏被分割为若⼲单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），
即数据单元格的内容。数据单元格可以包含⽂本、图⽚、列表、段落、表单、⽔平线、表格等等。
③边框属性通过 <table> 标签中的 border 属性进⾏设置，其中，border="0"表⽰⽆边框，border="1"默认就是带边框。如果不定
义边框属性，表格将不显⽰边框。有时这很有⽤，但是⼤多数时候，我们希望显⽰边框。
④表格的表头使⽤ <th> 标签进⾏定义。⼤多数浏览器会把表头显⽰为粗体居中的⽂本。
⑤表格的标题使⽤ <caption> 标签进⾏定义。
⑥单元格边距通过 <table> 标签中的 cellpadding 属性进⾏设置，其中，cellpadding="0"表⽰⽆边距，cellpadding="10"就是带上
了单元格边距。
⑦单元格间距通过 <table> 标签中的 cellspacing 属性进⾏设置，其中，cellspacing="0"表⽰⽆间距，cellspacing="10"就是带上
了单元格间距。
下⾯我们来看10个⼩实例，这些实例将会运⽤到以上提到的所有标签及相应的属性。
实例⼀：⽆边框的表格
<title>这是⼀个⽆边框的表格</title> </head>
<body>
<h4>这个表格没有边框</h4>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<hr/>
<h4>这个表格也没有边框</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
运⾏结果如下：
实例⼆：有边框的表格
<title>这是⼀个带边框的表格</title>
</head>
<body>
<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>
</body>
</html>
运⾏结果如下：
实例三：设置表格的⽔平标题和垂直标题
<title>HTML简单学习</title>
</head>
<body>
<h4>⽔平标题：</h4>
<table border="1">
<tr>
<th>Name</th>
<th>Sex</th>
<th>Telephone</th>
</tr>
<tr>
<td>songzihao</td>
<td>man</td>
<td>1234567890</td>
html表格内外边框颜</tr>
</table>
<hr/>
<h4>垂直标题</h4>
<table border="1">
<tr>
<th>Name</th>
<td>songzihao</td>
</tr>
<tr>
<th>Sex</th>
<td>man</td>
</tr>
<tr>
<th>Telephone</th>
<td>1234567890</td>
</tr>
</table>
</body>
</html>
运⾏结果如下：
实例四：设置带标题的表格
<title>HTML简单学习</title>
</head>
<body>
<table border="1">
<caption>Java三⼤特性</caption>
<tr>
<th>序号</th>
<th>特性</th>
</tr>
<tr>
<td>①</td>
<td>封装</td>
</tr>
<tr>
<td>②</td>
<td>继承</td>
</tr>
<tr>
<td>③</td>
<td>多态</td>
</tr>
</table>
</body>
</html>
运⾏结果如下：
实例五：设置跨⾏或跨列的表格

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。