1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Flexible table columns width, rows independent?

Discussion in 'HTML & Website Design' started by postcd, Nov 25, 2020.

  1. #1
    Hello,

    i have HTML table with 3 rows.
    the third row contains in the middle three columns that contains extraordinary long phrasesphrases which cause columns above these long columns to be long too and that looks bad, because above rows contains images so spacing is different.
    SEMrush
    How can i set the HTML table columns width to be flexible, i mean so the wide third row columns does not influence width of the columns in other rows of the same table?

    This is my table code, i would possibly try to convert it into <div> but since the code seems difficult and me beginner, i am asking regarding hack to tweak current HTML table code, unless someone have time to turn it into div for me.
     
    postcd, Nov 25, 2020 IP
    SEMrush
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,465
    Likes Received:
    1,917
    Best Answers:
    246
    Trophy Points:
    515
    #2
    1) single quotes in PHP are your friend, it would mean less /" escaping.

    2) there are more tags that go into a table than just TR and TD. You might want to learn about CAPTION, THEAD, TBODY, TFOOT, and of course TH. The SCOPE attribute doesn't hurt either.

    3) These don't look like single table entries, it almost looks like each category should be its own table, in which case that first TD should be a CAPTION.

    4) use echo, not print. Less overhead.

    5) attributes like align, presentational classes like "bottom", and what you're doing with style="" has NO business in your markup. That's external CSS' job!

    I could go on for quite a bit. That said I'm not sure this is even tabular data, and would really have to see it live to know what this content is before I could weigh in on the proper markup. The lack of labels and table headings pretty much makes this gibberish in terms of both understanding the code, and usability on the front end.
     
    deathshadow, Nov 25, 2020 IP
  3. sarahk

    sarahk iTamer Staff

    Messages:
    26,761
    Likes Received:
    4,068
    Best Answers:
    115
    Trophy Points:
    665
    #3
    You didn't ask for a code review but I looked and can never unsee that!

    ' and " are different things.
    $a = 'abc';
    
    $b = '$a';
    $c = "$a";
    
    echo $b;
    echo $c;
    PHP:
    will result in
    Single quotes don't look for variables within the string and are, therefore, a teeny weeny bit faster and safer.
    Double quotes do look for variables and we can give it a helping hand by wrapping the variables in {}, especially when dealing with arrays and objects.

    So in your code you have
    print("<tr><td class=\"embedded\" colspan=\"".$catsperrow."\" align=\"left\"><b>".$name."</b></td></tr><tr>");
    PHP:
    Your script is saying use a smart string but don't do anything smart. It could look like this instead and will be easier to read and maintain:
    print("<tr><td class='embedded' colspan='{$catsperrow}' align='left'><strong>{$name}</strong></td></tr><tr>");
    PHP:
    You also have this monster:
    $checker = "<input name=\"".$btname."\" value='" .  $lang_torrents['input_check_all'] . "' class=\"btn medium\" type=\"button\" onclick=\"javascript:SetChecked('".$cbname."','".$btname."','". $lang_torrents['input_check_all'] ."','" . $lang_torrents['input_uncheck_all'] . "',-1,10)\" />";
    PHP:
    First up, you should be using a listener to listen for clicks, but lets stick with the onclick event.
    My first pass on this would look like this
    $checker = "<input name='{$btname}\' value='{$lang_torrents['input_check_all']}' class='btn medium' type='button' data-cbname='{$cbname}' data-btname='{$btname}' data-check='{$lang_torrents['input_check_all']}' data-uncheck='{$lang_torrents['input_uncheck_all']}' onclick='javascript:SetChecked(-1,10)' />";
    PHP:
    Instead of passing a stack of variables through to the function and creating a really hard to read and debug bit of code I'd utilise the data- attribute which lets me store the info as separate attributes that the javascript event can retrieve because it knows what it's parent is.

    Back to the original question

    It sounds like you need either 3 tables or 1 table and one nested table. The nested option means that the first and third rows will have the same column dimensions and row 2 just gets to do it's own thing.

    upload_2020-11-26_12-17-10.png
     
    sarahk, Nov 25, 2020 IP
    postcd likes this.
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,465
    Likes Received:
    1,917
    Best Answers:
    246
    Trophy Points:
    515
    #4
    Whereas I'd punch myself in the face before doing that. I've no clue what this is even supposed to be doing, but first off I'd switch to single quotes, retain the function, and use echo so you're not wasting memory and processing time on complex string BS.

    That and I have NO clue what the blazes that scripttardery is for, but it doesn't look like it's doing anything good. Particularly if this is a type="button" meaning it doesn't even belong in the markup and should be built BY the client-side scripting, not the server!

    I mean just find the parentnode fieldset, then iterate the elements looking for type="checkbox"...

    But again, no clue what the blazes makes this tabular data, where the actual label to tell people what any of these input are even for, etc, etc, etc.

    What's the end-game of this mess?
     
    deathshadow, Nov 25, 2020 IP
    postcd likes this.
  5. postcd

    postcd Well-Known Member

    Messages:
    1,015
    Likes Received:
    9
    Best Answers:
    1
    Trophy Points:
    190
    #5
    thank you.
    The row where are images which are not evenly spaced each to other (thanks to a different row of the table) is this one:

    any suggestion how to modify it so it uses mentioned nested table so the columns within this row are now affected by the columns below/above of this row??

    More context of the mentioned code is here.
     
    postcd, Nov 26, 2020 IP
  6. sarahk

    sarahk iTamer Staff

    Messages:
    26,761
    Likes Received:
    4,068
    Best Answers:
    115
    Trophy Points:
    665
    #6
    That's always an option!
    The print is a problem, the variables appear to be static so they could just be put straight onto the page.

    @postcd you don't appear to have used a nested table. Any reason you don't want to do that?
     
    sarahk, Nov 26, 2020 IP