HTML - Tabele

Tabele HTML umożliwiają autorom stron internetowych układanie danych, takich jak tekst, obrazy, łącza, inne tabele itp. W wierszach i kolumnach komórek.

Tabele HTML są tworzone przy użyciu rozszerzenia <table> tag, w którym <tr> tag służy do tworzenia wierszy tabeli i <td>tag służy do tworzenia komórek danych. Elementy w <td> są domyślnie regularne i wyrównane do lewej

Przykład

<!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>

To da następujący wynik -

Tutaj borderjest atrybutem znacznika <table> i służy do umieszczania obramowania we wszystkich komórkach. Jeśli nie potrzebujesz ramki, możesz użyć border = "0".

Nagłówek tabeli

Nagłówek tabeli można zdefiniować za pomocą <th>etykietka. Ten tag zostanie zastąpiony tagiem <td>, który jest używany do reprezentowania rzeczywistej komórki danych. Zwykle górny wiersz umieszczasz jako nagłówek tabeli, jak pokazano poniżej, w przeciwnym razie możesz użyć elementu <th> w dowolnym wierszu. Nagłówki, które są zdefiniowane w tagu <th> są domyślnie wyśrodkowane i pogrubione.

Przykład

<!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>

To da następujący wynik -

Atrybuty Cellpadding i Cellspacing

Istnieją dwa atrybuty zwane wypełnianiem komórek i odstępami między komórkami, których będziesz używać do dostosowywania odstępów w komórkach tabeli. Atrybut cellspacing określa odstęp między komórkami tabeli, natomiast cellpadding reprezentuje odległość między granicami komórek a zawartością w komórce.

Przykład

<!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>

To da następujący wynik -

Atrybuty Colspan i Rowspan

Będziesz używać colspanatrybut, jeśli chcesz scalić dwie lub więcej kolumn w jedną kolumnę. W podobny sposób użyjeszrowspan jeśli chcesz scalić dwa lub więcej wierszy.

Przykład

<!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>

To da następujący wynik -

Tabele Tła

Tło tabeli można ustawić na jeden z dwóch poniższych sposobów -

bgcolor atrybut - możesz ustawić kolor tła dla całej tabeli lub tylko dla jednej komórki.
background atrybut - możesz ustawić obraz tła dla całej tabeli lub tylko dla jednej komórki.

Możesz także ustawić kolor obramowania również za pomocą bordercolor atrybut.

Note- Atrybuty bgcolor , background i bordercolor są przestarzałe w HTML5. Nie używaj tych atrybutów.

Przykład

<!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>

To da następujący wynik -

Oto przykład użycia backgroundatrybut. Tutaj użyjemy obrazu dostępnego w katalogu / images.

<!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>

Spowoduje to następujący wynik. Tutaj obraz tła nie miał zastosowania do nagłówka tabeli.

Wysokość i szerokość stołu

Możesz ustawić szerokość i wysokość tabeli za pomocą width i heightatrybuty. Możesz określić szerokość lub wysokość tabeli w pikselach lub w procentach dostępnego obszaru ekranu.

Przykład

<!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>

To da następujący wynik -

Podpis tabeli

Plik captiontag będzie służyć jako tytuł lub wyjaśnienie tabeli i pojawi się na górze tabeli. Ten tag jest przestarzały w nowszej wersji HTML / XHTML.

Przykład

<!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>

To da następujący wynik -

Nagłówek, treść i stopka tabeli

Tabele można podzielić na trzy części - nagłówek, korpus i stopkę. Nagłówek i stopka są raczej podobne do nagłówków i stopek w dokumencie przetwarzanym tekstowo, które pozostają takie same dla każdej strony, podczas gdy treść jest głównym miejscem przechowywania zawartości tabeli.

Trzy elementy do oddzielenia głowy, korpusu i podstawy stołu to:

<thead> - aby utworzyć oddzielny nagłówek tabeli.
<tbody> - wskazać główną część tabeli.
<tfoot> - aby utworzyć osobną stopkę tabeli.

Tabela może zawierać kilka elementów <tbody> wskazujących różne strony lub grupy danych. Należy jednak zauważyć, że tagi <thead> i <tfoot> powinny pojawiać się przed tagiem <tbody>

Przykład

<!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>

To da następujący wynik -

Tabele zagnieżdżone

Możesz użyć jednej tabeli wewnątrz innej tabeli. Nie tylko tabele, możesz użyć prawie wszystkich tagów wewnątrz znacznika danych tabeli <td>.

Przykład

Poniżej znajduje się przykład użycia innej tabeli i innych tagów wewnątrz komórki tabeli.

<!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>

To da następujący wynik -