HTML ---表格

1.在 html 中使用一个表格代码如下:

<table>
     <tr><td>第一行第一列td><td>第一行第二列td>tr>
     <tr><td>第二行第一列td><td>第二行第二列td>tr>
table>

显示的效果:
HTML ---表格_第1张图片

2.并没有表格的边框线,我们 需要加上这样一个代码:

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

显示效果:
HTML ---表格_第2张图片

3.双边框用css显示


<html>
 <head>
  <meta charset="UTF-8">
  <title>Documenttitle>
  <style type="text/css">
        table{border:1px solid red;}
        td{border:1px solid red;}   
  style>
 head>
 <body>
   <table>
        <tr><td>第一行第一列td><td>第一行第二列td>tr>
        <tr><td>第二行第一列td><td>第二行第二列td>tr>
   table>
 body>
html>

显示效果:
HTML ---表格_第3张图片

4.合并表格的双边框线

    
<html>
 <head>
  <meta charset="UTF-8">
  <title>Documenttitle>
  <style type="text/css">
        table{border:1px solid red; border-collapse:collapse;}
        td{border:1px solid red;}   
  style>
 head>
 <body>
       <table>
        <tr><td>第一行第一列td><td>第一行第二列td>tr>
        <tr><td>第二行第一列td><td>第二行第二列td>tr> 
       table>
 body>
html>

显示效果:
HTML ---表格_第4张图片

你可能感兴趣的:(html,表格双线边框合并,HTML)