所属分类:web前端开发
我们可以轻松地在表格中添加 HTML 标签。 HTML 标签应放置在 <td> 标签内。例如,在 <td> 标签内添加段落 <p>…</p> 标签或其他可用标签。
以下是在 HTML 表格中使用 HTMl 标记的语法。
<td> <p> Paragraph of the context</p> <td>
下面给出了在 HTML 表格中使用 HTML 标签的示例。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> table,tr,th,td { border:1px solid black; } </style> </head> <body> <table style="width: 50%"> <caption style="text-align: center; ">Employees</caption> <tr> <th >EmployeeName</th> <th >About Employee</th> </tr> <tr> <td >Yadav</td> <td ><p>Lokesh yadav is a content developer at tutorialspoint.</p></td> </tr> <tr> <td>Abdul</td> <td ><p>Abdul is a content developer at tutorialspoint.</p></td> </tr> </table> </body> </html>
以下是上述示例程序的输出。
我们还可以在 HTML 表格中添加其他 HTML 标签。
以下是在 HTML 表格中使用 HTMl 标记的语法。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> table,tr,th,td { border:1px solid black; } </style> </head> <body> <table style="width: 50%"> <caption style="text-align: center; ">Employees</caption> <tr> <th>EmployeeName</th> <th>Languages Known</th> </tr> <tr> <td>Yadav</td> <td><ul> <li>HTML</li> <li>Java</li> <li>C</li> </ul></td> </tr> <tr> <td>Abdul</td> <td ><ul> <li>C#</li> <li>Java</li> <li>C</li> </ul></td> </tr> </table> </body> </html>
以下是上述示例程序的输出。
在 HTML 表格中使用 HTML 标签的另一个示例如下 -
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; width: 400px; } </style> </head> <body> <h1> Total Points</h1> <table> <tr> <th>Technologies</th> <th>Points</th> </tr> <tr> <td>Programming Languages <ul> <li>C++</li> <li>Java</li> <li>C</li> </ul> </td> <td>100</td> </tr> <tr> <td>Database <ul> <li>MySQL</li> <li>Oracle</li> <li>CouchDB</li> </ul> </td> <td>50</td> </tr> </table> </body> </html>