Splitting a table cell into two columns in HTML

Question

I have the following table    lt table border  1  gt     lt tr gt       lt th scope  col  gt Header lt  th gt       lt th scope  col  gt Header lt  th gt       lt th scope  col  gt Header lt  th gt     lt  tr gt     lt tr gt       lt th scope  row  gt  amp nbsp  lt  th gt       lt td gt  amp nbsp  lt  td gt       lt td gt Split this one into two columns lt  td gt     lt  tr gt   lt  table gt    And I wish to split the cell which contains  Split this one into two columns  into two cells columns  How do I go about this   Fiddle

User · Answer

Please try this way   lt table border  quot 1 quot  gt       lt tr gt           lt th scope  quot col quot  gt Header lt  th gt           lt th scope  quot col quot  gt Header lt  th gt           lt th colspan  quot 2 quot  gt Header lt  th gt       lt  tr gt        lt tr gt           lt td scope  quot row quot  gt  amp nbsp  lt  td gt           lt td scope  quot row quot  gt  amp nbsp  lt  td gt           lt td scope  quot col quot  gt Split this one lt  td gt           lt td scope  quot col quot  gt into two columns lt  td gt       lt  tr gt   lt  table gt

User · Answer

Like this http   jsfiddle net 8ha9e 1   Add colspan  2  to the 3rd  lt th gt  and then have 4  lt td gt  s in your second row    lt table border  1  gt     lt tr gt       lt th scope  col  gt Header lt  th gt       lt th scope  col  gt Header lt  th gt       lt th scope  col  colspan  2  gt Header lt  th gt     lt  tr gt     lt tr gt       lt th scope  row  gt  amp nbsp  lt  th gt       lt td gt  amp nbsp  lt  td gt       lt  -- The following two cells will appear under the same header -- gt       lt td gt Col 1 lt  td gt       lt td gt Col 2 lt  td gt     lt  tr gt   lt  table gt

User · Answer

is that what your looking for    lt table border  1  gt   lt tr gt    lt th scope  col  gt Header lt  th gt    lt th scope  col  gt Header lt  th gt    lt th scope  col  colspan  2  gt Header lt  th gt   lt  tr gt   lt tr gt    lt th scope  row  gt  amp nbsp  lt  th gt    lt td gt  amp nbsp  lt  td gt    lt td gt Split this one lt  td gt    lt td gt into two columns lt  td gt   lt  tr gt   lt  table gt

User · Answer

Please try the following way    lt table gt     lt tr gt       lt th gt Month lt  th gt       lt th gt Savings lt  th gt     lt  tr gt     lt tr gt       lt td gt January lt  td gt       lt td gt  100 lt  td gt     lt  tr gt     lt tr gt       lt td gt February lt  td gt       lt td gt  80 lt  td gt     lt  tr gt     lt tr gt       lt td colspan  2  gt Sum   180 lt  td gt     lt  tr gt   lt  table gt

User · Answer

Change the  lt td gt  to be split to look like this    lt td gt  lt table gt  lt tr gt  lt td gt split 1 lt  td gt  lt td gt split 2 lt  td gt  lt  tr gt  lt  table gt  lt  td gt

User · Answer

Use this example  you can split with the colspan attribute   lt TABLE BORDER gt        lt TR gt            lt TD gt Item 1 lt  TD gt            lt TD gt Item 1 lt  TD gt            lt TD COLSPAN 2 gt Item 2 lt  TD gt       lt  TR gt       lt TR gt            lt TD gt Item 3 lt  TD gt            lt TD gt Item 3 lt  TD gt            lt TD gt Item 4 lt  TD gt            lt TD gt Item 5 lt  TD gt       lt  TR gt   lt  TABLE gt    More examples at http   hypermedia univ-paris8 fr jean internet ex table html

User · Answer

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

User · Answer

https   jsfiddle net SyedFayaz ud0mpgoh 7   lt table class  quot table-bordered quot  gt     lt col   gt     lt col   gt     lt col   gt     lt colgroup span  quot 4 quot  gt  lt  colgroup gt     lt col   gt     lt tr gt       lt th rowspan  quot 2 quot  style  quot vertical-align  middle  text-align  center quot  gt        S No       lt  th gt       lt th rowspan  quot 2 quot  style  quot vertical-align  middle  text-align  center quot  gt Item lt  th gt       lt th rowspan  quot 2 quot  style  quot vertical-align  middle  text-align  center quot  gt        Description      lt  th gt       lt th       colspan  quot 3 quot        style  quot horizontal-align  middle  text-align  center  width  50  quot       gt        Items      lt  th gt       lt th rowspan  quot 2 quot  style  quot vertical-align  middle  text-align  center quot  gt        Rejected Reason      lt  th gt     lt  tr gt     lt tr gt       lt th scope  quot col quot  gt Order lt  th gt       lt th scope  quot col quot  gt Received lt  th gt       lt th scope  quot col quot  gt Accepted lt  th gt     lt  tr gt     lt tr gt       lt th gt 1 lt  th gt       lt td gt Watch lt  td gt       lt td gt Analog lt  td gt       lt td gt 100 lt  td gt       lt td gt 75 lt  td gt       lt td gt 25 lt  td gt       lt td gt Not Functioning lt  td gt     lt  tr gt     lt tr gt       lt th gt 2 lt  th gt       lt td gt Pendrive lt  td gt       lt td gt 5GB lt  td gt       lt td gt 250 lt  td gt       lt td gt 165 lt  td gt       lt td gt 85 lt  td gt       lt td gt Not Working lt  td gt     lt  tr gt   lt  table gt

User · Answer

I came here for a similar problem I was facing with my table headers     MrMisterMan s answer  as well as others  were really helpful  but the borders were beating my game  So  I did some research to find the use rowspan   Here s what I did and I guess it might help others facing something similar    x000D   x000D   lt table style  width  100   margin-top  10px  font-size  0 8em   border  1px  gt  x000D       lt tr align  center   gt  x000D           lt th style  padding 2 5px  width  10    rowspan  2  gt Item No lt  th gt  x000D           lt th style  padding 2 5px  width  55    rowspan  2  gt DESCRIPTION lt  th gt  x000D           lt th style  padding 2 5px   rowspan  2  gt Quantity lt  th gt  x000D           lt th style  padding 2 5px   colspan  2  gt Rate per Item lt  th gt  x000D           lt th style  padding 2 5px   colspan  2  gt AMOUNT lt  th gt  x000D       lt  tr gt  x000D       lt tr gt  x000D           lt th gt Rs  lt  th gt  x000D           lt th gt P  lt  th gt  x000D           lt th gt Rs  lt  th gt  x000D           lt th gt P  lt  th gt  x000D       lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D

[html] Splitting a table cell into two columns in HTML

Examples related to html

Examples related to css

Examples related to html-table