How to create columns in html - learnit

Home Top Ad

Post Top Ad

Monday, May 18, 2020

How to create columns in html

How to create columns or Table in html

What is HTML?

Hypertext Markup Language (HTML) is a computer language that makes up most web pages and online applications. A hypertext is a text that is used to reference other pieces of text, while a markup language is a series of markings that tells web servers the style and structure of a document.


HTML is not considered a programming language as it can’t create dynamic functionality. Instead, with HTML, web users can create and structure sections, paragraphs, and links using elements, tags, and attributes.


Why use HTML

Web development. Developers use HTML code to design how a browser displays web page elements, such as text, hyperlinks, and media files.


Internet navigation. Users can easily navigate and insert links between related pages and websites as HTML is heavily used to embed hyperlinks.


Web documentation. HTML makes it possible to organize and format documents, similarly to Microsoft Word.


How to create columns or Table in html

HTML table allows you to arrange data into rows and columns. They are commonly used to display tabular data like product listings, customer's details, financial reports, and so on.


You can create a table using the lt;table> element. Inside the <Table> element, you can use the <Tr> elements to create rows, and to create columns inside a row you can use the <td> elements. You can also define a cell as a header for a group of table cells using the <Th> element.


The Example is Below

<table border="1" >
<tr>
<th> ID </th>
<th> Name </th>
<th> Gender </th>
<th> Salary </th>
</tr>
<tr>
<td> 1 </td>
<td> A </td>
<td> Male</td>
<td> $200</td>
</tr>
<tr>
<td> 2 </td>
<td>B </td>
<td>Female </td>
<td>$300 </td>
</tr>
</table>

Tables do not have any borders by default. You can use the CSS border property to add borders to the tables. Also, table cells are sized just large enough to fit the contents by default. To add more space around the content in the table cells you can use the CSS padding property.

Example

table,th,td
{
border:2px soilder black;
}
th,td
{
padding:15px;
}

By default, borders around the table and their cells are separated from each other. But you can collapse them into one by using the border-collapse property on the <table> element.

Also, text inside the <th> elements are displayed in bold font, aligned horizontally center in the cell by default. To change the default alignment you can use the CSS text-align property.

Example

<table > { border-collapse;}, th{text-align:Justify;}

Please Watching My Video is Below

No comments:

Post a Comment

Post Top Ad