Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make one <td> span both columns in a two column table?

Tags:

html

css

click to see the image

How can I create a table like the above example in HTML and CSS. I've tried the following:

<table>    <tr>      <td style="width:50%">TEXT</td>     <td style="width:50%">TEXT</td>    </tr>   <tr>      <td style="width:100%">TEXT</td>    </tr> 

but it won't work. Can anyone help?

like image 888
Ben Ben-Hamo Avatar asked Jul 12 '13 01:07

Ben Ben-Hamo


People also ask

How do you split TD into two columns?

You have two options. Use an extra column in the header, and use <colspan> in your header to stretch a cell for two or more columns. Insert a <table> with 2 columns inside the td you want extra columns in.

How do you span data across multiple columns?

To make a cell span more than one column, use the colspan attribute.

How do you span a column in a table?

The colspan attribute in HTML is used to set the number of columns a cell should span in a table. Use the colspan attribute on the <td> or <th> element.

How do you span cells across various rows and columns?

Table cells can span multiple columns or rows using the colspan and rowspan attributes. These attributes can be applied to <th> and <td> elements.


1 Answers

You should use colspan for your second row. Like this :

<table>     <tr>         <td style="width:50%">TEXT</td>         <td style="width:50%">TEXT</td>     </tr>     <tr>         <td colspan="2" style="width:100%">TEXT</td>     </tr>     ... </table> 

For learn -> HTML Colspan

like image 75
Aldi Unanto Avatar answered Sep 29 '22 07:09

Aldi Unanto