HTML Table Border Collapse Without CSS

• Introduction
• Create Table
• Border of the Table
• Border collapse without CSS
• Merging Cells
• Conclusion

Introduction:

This articles says how to create HTML table border collapse. Table using the information has split into row and column and neat information. Arranging information in table mode makes the information visually appealing and easy to read. Each row is divided into a lot of columns. In a row they say individual column is called cell and the information given in that cell is called data. You can change the width, space and color of the cell to your liking. At back of the table, we can display the desired image or bgcolor.

Table:

We can create a table by using <Table> tag. The <Table> tag is a pair tag. When creating a table in an HTML document, the opening tag is <table> and the closing tag is </Table>. A column is created according to the number of tables you enter in a row. The information you enter in a Row is called Data. You can split a table in the document into as many rows as you need. The <TR> tag is used to create a row in a table. <TR> is called table row, a row starts with the start tag <TR> and ends with the close tag </TR>.

  The information given in the row both of the commands are <TH> and <TD> belong to the pair tag category. The <TH> Tag is called Table Header and <TD> is called Table data. The font of the information given in it will appear as Font Bold. The information given in the row starts with the start tag <TH> and ends with the end tag </TH>. <TH> tag is also called Table Header element. The columns are sorted and the information is given using the first row <TH> command of the table in the document. If you want the information given in the table to appear as a highlight <TH>. The cell spacing attribute allows you to make space between one cell and another in the table created in the document. The cell padding attribute allows you to create a space between the border of a cell and the information in that cell in the table created in the document.

General Syntax for Creating a Table:

<table cellpadding="2px" cellspacing="2px">
<tr> # create a table row
<th> Hardware </th> # Create a table heading 
<th> Packages </th> 
</tr> # closing a table row

<tr> # create a table row
<td> Keyboard </td> # Create a data of table 
<td> MS_Word </td> 
</tr> # closing a table row

<tr> # create a table row
<td> System Unit </td> # Create a data of table 
<td> Page maker </td> 
</tr> # closing a table row 
</table>

Border of the Table:

  When creating a table using the <Table> attributes, you must use the “Border” attribute to create a border around that table and the enclosed cells in the table.

Syntax:

<table border =" 3"> # using border attribute
<tr> # create a table row
<th> country </th> # Create a table heading
<th> currency name </th>
</tr> # closing a table row

<tr> # create a table row
<td> India </td> # Create a data of table
<td> ruppes </td>
</tr> # closing a table row

<tr> # create a table row
<td> America </td> # Create a data of table
<td> Dollars </td>
</tr> # closing a table row
</table>

Border Collapse:

  Table border collapse is used to align a position of the cell and it is one of table attribute. This is also use in table or <TR> HTML tags. This default value of border collapse is “separate” so, we don’t use use. The javascript syntax of border collapse is object.style.border Collapse=”initial”. There are four options for table border collapse is separate, collapse, initial and inherit. “Collapse” in “Border Collapse” property is used to collapse two cell border into one cell border. Separate property is used for each cells are covert into separated. Initial property is used for default value and inherit property is used for inherits the property from it parent element. many developer it using without CSS method and it is very easy method to use.

Syntax border collapse without CSS:

<table border="1px" style="border-collapse: collapse;"> # border collapse without CSS
<tr>
<td> Row1 column1 </td>
<td> Row1 column2 </td>
<td> Row1 column3 </td>
</tr>
<tr>
<td> Row2 column1 </td>
<td> Row2 column2 </td>
<td> Row2 column3 </td>
</tr>
</table>

Merging Cells:

  Cells in a table created using the <table> tag in the HTML language have the ability to combine more than one cell into a single cell. When more than one cell is combined in a table that is created, those cells all come together to form a single cell. Thus an individual cell that is made up of more than one cell can be made up of more than two rows or more than two columns. using <th> tag to connecting cell. There are two Atrributes for merging cells:

1.Rowspan – You can combine the number of rows in the table into a single cell and use it as a numeric value in the rowspan attribute.

2.Colspan-You can combine the number of columns in the table to form a single cell and use it as a numeric value in the colspan attribute.

Syntax:
<table border = "5">
<tr>
<th Rowspan = "2"> Hardware </th>
<th Colspan = "3"> Software </th>
<tr>

Conclusion:

  I think this article will be useful for you in some way. Thank you for reading.