Таблицы HTML

Advertisements

Previous Page
Next Page  

Таблицы HTML позволяют авторам паутины аранжировать данные как текст, изображения, соединения, другие таблицы, etc. в рядки и колонки клеток.

Таблицы HTML созданы используя бирку <table> в которой бирка <tr> использована для того чтобы создать рядки таблицы и бирка <td> использовано для того чтобы создать клетки данных.

Пример

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

Это даст следующий:

Name Salary
Ramesh Raman 5000
Shabbir Hussein 7000

Здесь граница атрибут бирки <table> и она использована для того чтобы положить границу через все клетки. Если вам не нужна граница после этого, то вы можете использовать border= " 0".

Рубрика таблицы

Рубрику таблицы можно определить используя бирку <th>. Эта бирка будет положена для того чтобы заменить бирку <td>, которая использована для того чтобы представить фактическую клетку данных. Нормально вы положите ваш верхний рядок как рубрика таблицы как показан ниже, в противном случае вы можете использовать элемент <th> в любом рядке.

Пример

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

Это даст следующий:

Name Salary
Ramesh Raman 5000
Shabbir Hussein 7000

Cellpadding и атрибуты Cellspacing

2 вызванного attribiutes cellpadding и cellspacing которому вы будете использовать для того чтобы отрегулировать белый космос в ваших клетках таблицы. Cellspacing атрибут определяет ширину границы, пока cellpadding представляет расстояние между границами клетки и содержанием внутри клетка.

Пример

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

Это даст следующий:

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

Colspan и атрибуты Rowspan

Вы будете использовать colspan атрибут если вы хотите слить два или больше колонки в одностоечное. Подобный путь вы будете использовать rowspan если вы хотите слить два или больше рядки.

Пример

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

Это даст следующий:

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

Предпосылки таблиц

Вы можете установить предпосылку таблицы используя один из следующих 2 путей:

  • атрибут bgcolor - вы можете установить цвет предпосылки для всей таблицы или как раз для одной клетки.

  • атрибут предпосылки - вы можете установить фоновое изображение для всей таблицы или как раз для одной клетки.

Вы можете также установить цвет границы также используя атрибут bordercolor.

Пример

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

Это даст следующий:

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

Здесь пример атрибута предпосылки использования. Здесь мы будем использовать изображение доступное в директории /images.

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

Это даст следующий. Здесь фоновое изображение не применилось к коллектору таблицы.

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. This tag is depracated in newer version of HTML/XHTML.

Пример

<!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 is the caption
row 1, column 1row 1, columnn 2
row 2, column 1row 2, columnn 2

Титр таблицы

Бирка титра будет служить как название или объяснение для таблицы и его показывает вверх вверху таблица. Эта бирка depracated в более новой версии HTML/XHTML.

Пример

<!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 is the caption
row 1, column 1row 1, columnn 2
row 2, column 1row 2, columnn 2

Коллектор, тело, и сноска таблицы

Таблицы можно разделить в 3 части: коллектор, тело, и нога. Головка и нога довольно подобны к коллекторам и сноскам в слов-обрабатываемом документе которые остают этими же для каждой страницы, пока тело главный содержимый держатель таблицы.

3 элемента для отделять головку, тело, и ногу таблицы являются следующими:

  • <thead> - создать отдельно коллектор таблицы.
  • <tbody> - показать основной корпус таблицы.
  • <tfoot> - создать отдельно сноску таблицы.

Таблица может содержать несколько элементов <tbody> для того чтобы показать различные страницы или группы в составе данные. Но она знатна что бирки <thead> и <tfoot> должны появиться перед <tbody>

Пример

<!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 is the head of the table
This is the foot of the table
Cell 1 Cell 2 Cell 3 Cell 4

Гнездят таблицы

Вы можете использовать одну таблицу внутри другой таблицы. Не только таблицы вы можете использовать почти все бирки внутри <td> бирки данным по таблицы.

Пример

Следование пример использования другой таблицы и других бирок внутри клетки таблицы.

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

Это даст следующий:

Name Salary
Ramesh Raman 5000
Shabbir Hussein 7000
Advertisements