User:Timeshifter/Sandbox53

Example tables.

Here is how to put a main table adjacent to a separate row number table.

name	data	more data
cats	273	53
dogs	65	8,492
mice	1,649	548

1
2
3

The two tables are combined by wrapping them within a 3rd table that does not have a border. Look at the wikitext to understand. See examples below. It is not necessary to put text in the header cell above the number column. You can leave it blank, but sortable. Add <br> so it is not too narrow.

1 2 3

name data more data cats 273 53 dogs 65 8,492 mice 1,649 548

Align the multiple headers across the table below by adding <br> (multiple times if necessary) to the header cells of the rank column. See the wikitext for the table below. See also: List of U.S. states by incarceration rate and List of countries by intentional homicide rate#By country. Those tables have several header rows.

1 2 3

name data more data cats 273 53 dogs 65 8,492 mice 1,649 548

With wider tables the rows only line up between the table and the rank column if all the rows below the headers only use one line each. So it is a good idea to avoid tables that are too wide. For that reason avoid note columns, too. Narrow your browser window to see the problem with wider tables such as the one below. Another problem is that the rank column can drop down out of sight when the tables are viewed on a narrow screen, or when the browser width is narrowed.

Adding style="vertical-align:top;" will keep the tops aligned between the 2 tables at all browser widths. The rank column will not drop down.

1 2 3

name popularity data columns another column year notes data more data cats popular pet 273 53 1 2013 To align headers add breaks to the header cells of the rank column. dogs popular pet 65 8,492 2 2014 This does not align the tops of the 2 tables at narrow browser widths. mice less popular 1,649 548 3 Adding CSS for vertical alignment will keep the tops aligned.

For the above table here is the wikitext at the top of the wrapping table, followed by the header wikitext for the rank column:

{|
|- style="vertical-align:top;"
|
{| class="wikitable sortable" 
|-
! <br>
|-
! <br>
|-
! <br>
|-