1. Location:
  2. / Computer learning >> Computer læring >> Kendskab til programmering >> Programmeringssprog >> html og HTML5 >>

i tabel

, html tabeller giver web forfattere til at arrangere data som tekst, billeder, forbindelser, andre tabeller osv. i rækker og kolonner af celler, html tabeller er skabt ved hjælp af, < tabel >, mærke, hvor < tr >, tag er anvendt at skabe tabel rækker og < td >, tag, anvendes til at skabe data celler. f.eks. <!DOCTYPE html> <html> <head> <title>HTML Tables</title> </head> <body> <table border="1"> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> </table> </body> </html> ,This will produce following result:, Row 1, Column 1 Row 1, Column 2 Row 2, Column 1 Row 2, Column 2 ,Here ,border, is an attribute of <table> tag and it is used to put a border across all the cells. hvis du har brug for, er ikke en grænse, så kan du bruge grænse = "0". tabel position, tabel position kan defineres ved hjælp af < t >, tag.dette mærke skal være at erstatte < td > tag, som anvendes til at repræsentere de faktiske data, celle.normalt vil du sætte din øverste række i tabel position som vist nedenfor, ellers kan du bruge < t > element i en række. f.eks. <!DOCTYPE html> <html> <head> <title>HTML Table Header</title> </head> <body> <table border="1"> <tr> <th>Name</th> <th>Salary</th> </tr> <tr> <td>Ramesh Raman</td> <td>5000</td> </tr> <tr> <td>Shabbir Hussein</td> <td>7000</td> </tr> </table> </body> </html> ,This will produce following result:, Name Salary Ramesh Raman 5000 Shabbir Hussein 7000 ,Cellpadding and Cellspacing Attributes,There are two attribiutes called ,cellpadding, and ,cellspacing, which you will use to adjust the white space in your table cells. den cellspacing attribut defineres bredden af grænsen, mens cellpadding er afstanden mellem mobil grænser og indholdet i en celle. f.eks. <!DOCTYPE html> <html> <head> <title>HTML Table Cellpadding</title> </head> <body> <table border="1" cellpadding="5" cellspacing="5"> <tr> <th>Name</th> <th>Salary</th> </tr> <tr> <td>Ramesh Raman</td> <td>5000</td> </tr> <tr> <td>Shabbir Hussein</td> <td>7000</td> </tr> </table> </body> </html> ,This will produce following result:, Name Salary Ramesh Raman 5000 Shabbir Hussein 7000 ,Colspan and Rowspan Attributes,You will use ,colspan, attribute if you want to merge two or more columns into a single column. på lignende måde du vil bruge, rowspan,, hvis du ønsker at samle to eller flere rækker. f.eks. <!DOCTYPE html> <html> <head> <title>HTML Table Colspan/Rowspan</title> </head> <body> <table border="1"> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr> <tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr> <tr><td colspan="3">Row 3 Cell 1</td></tr> </table> </body> </html> ,This will produce following result:, Column 1 Column 2 Column 3 Row 1 Cell 1 Row 1 Cell 2Row 1 Cell 3 Row 2 Cell 2Row 2 Cell 3 Row 3 Cell 1 ,Tables Backgrounds, kan du dække bord baggrund ved en af følgende to måder:,,,, bgcolor, tilskriver du kan sætte baggrund farve til hele bordet, eller blot for en enkelt celle.,,,,,,, baggrund, tilskriver du kan sætte baggrund image for hele bordet, eller blot for en enkelt celle.,,, du kan også fastsat grænse, farve, også ved hjælp af, bordercolor, tilskriver. f.eks. <!DOCTYPE html> <html> <head> <title>HTML Table Background</title> </head> <body> <table border="1" bordercolor="green" bgcolor="yellow"> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr> <tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr> <tr><td colspan="3">Row 3 Cell 1</td></tr> </table> </body> </html> ,This will produce following result:, Column 1 Column 2 Column 3 Row 1 Cell 1 Row 1 Cell 2Row 1 Cell 3 Row 2 Cell 2Row 2celle 3. række 3 - 1, her er et eksempel på anvendelse af, baggrund, attribut.her skal vi bruge et billede, der er til rådighed i /images fortegnelse. <!DOCTYPE html> <html> <head> <title>HTML Table Background</title> </head> <body> <table border="1" bordercolor="green" background="/images/test.png"> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr> <tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr> <tr><td colspan="3">Row 3 Cell 1</td></tr> </table> </body> </html> ,This will produce following result. her baggrund image, ikke fandt anvendelse på tabel brevhoved., kolonne 1, kolonne 2, kolonne 3, række 1. celle 1 række 1 celle 2row 1. celle 3, række 2, celle 2row 2 celle 3, række 3, mobil 1, tabel højde og bredde, du kan sætte en tabel bredde og højde, bredde og højde, attrubutes.kan de angive tabel bredde og højde i forhold til pixel eller i form af en procentdel af de skærmareal. f.eks. <!DOCTYPE html> <html> <head> <title>HTML Table Width/Height</title> </head> <body> <table border="1" width="400" height="150"> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> </table> </body> </html> ,This will produce following result:, Row 1, Column 1 Row 1, Column 2 Row 2, Column 1 Row 2, Column 2 ,Table Caption,The ,caption, tag will serve as a title or explanation for the table and it shows up at the top of the table. dette mærke er påkrævet i nyere version af /html /xhtml. f.eks. <!DOCTYPE html> <html> <head> <title>HTML Table Caption</title> </head> <body> <table border="1" width="100%"> <caption>This is the caption</caption> <tr> <td>row 1, column 1</td><td>row 1, columnn 2</td> </tr> <tr> <td>row 2, column 1</td><td>row 2, columnn 2</td> </tr> </table> </body> </html> ,This will produce following result:, ,This is the caption, row 1, column 1row 1, columnn 2 row 2, column 1row 2, columnn 2 ,Table Header, Body, and Footer,Tables can be divided into three portions: a header, a body, and a foot. hoved og fod og lignende til iæserne og footers i et ord, forarbejdede dokument, der er den samme for hver side, mens kroppen er det vigtigste indhold indehaver af bordet. de tre elementer til at adskille hoved - krop, og ved foden af et skema:,,, < thead > - at oprette en særskilt tabel header.,, < tbody > - at angive de vigtigste organ på bordet.,, < tfoot > - at oprette en særskilt tabel fod.,, en tabel, kan indeholde flere < tbody > elementer til at angive forskellige sider, eller grupper af data.men det er bemærkelsesværdigt, at < thead > og < tfoot > nogle kommer, før < tbody > f.eks. <!DOCTYPE html> <html> <head> <title>HTML Table</title> </head> <body> <table border="1" width="100%"> <thead> <tr> <td colspan="4">This is the head of the table</td> </tr> </thead> <tfoot> <tr> <td colspan="4">This is the foot of the table</td> </tr> </tfoot> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> </tbody> </table> </body> </html> ,This will produce following result:, This is the head of the table , This is the foot of the table , Cell 1 Cell 2 Cell 3 Cell 4 ,Nested Tables,You can brug en tabel i et andet bord.ikke kun tabeller kan du bruge næsten alle brikkerne i tabel data - < td >. f.eks. følgende er f.eks. ved hjælp af en anden tabel og andre mærker i en tabel celle. <!DOCTYPE html> <html> <head> <title>HTML Table</title> </head> <body> <table border="1" width="100%"> <tr> <td> <table border="1" width="100%"> <tr> <th>Name</th> <th>Salary</th> </tr> <tr> <td>Ramesh Raman</td> <td>5000</td> </tr> <tr> <td>Shabbir Hussein</td> <td>7000</td> </tr> </table> </td> </tr> </table> </body> </html> ,This will produce following result:, Name Salary Ramesh Raman 5000 Shabbir Hussein 7000.



Previous:
Next Page: