Tables

The inevitable HTML table, with special case cells

HTML Tables

Tables are a nice way to organize a lot of data. You can create a Astral table simply by attaching a single table CSS class on a <table> HTML element with the following structure:

<table class="table"> as the main container
- thead the optional top part of the table
- tfoot the optional bottom part of the table
- tbody the main content of the table
  - tr each table row
    - th a table cell heading
    - td a table cell

You can set a table row as selected by appending the selected modifier on a <tr>

Name	Item Name	Item Price
Abubakar	Eclair	$0.87
Blessing	Jellybean	$3.76
Abasifreke	Lollipop	$7.00
Jumbo	KitKat	$9.99


    
      
        
          Name
          Item Name
          Item Price
        
      
      
        
          Abubakar
          Eclair
          $0.87
        
        
          Blessing
          Jellybean
          $3.76
        
        
          Abasifreke
          Lollipop
          $7.00
        
        
          Jumbo
          KitKat
          $9.99

Striped Tables

Add class="striped" to the table tag for a striped table.

Name	Item Name	Item Price
Abubakar	Eclair	$0.87
Blessing	Jellybean	$3.76
Abasifreke	Lollipop	$7.00

    
      
        
          
            Name
            Item Name
            Item Price
          
        
        
          
            Abubakar
            Eclair
            $0.87
          
          
            Blessing
            Jellybean
            $3.76
          
          
            Abasifreke
            Lollipop
            $7.00

Hover Tables

Add class="hover" to the table tag for a highlight table.

Name	Item Name	Item Price
Abubakar	Eclair	$0.87
Blessing	Jellybean	$3.76
Abasifreke	Lollipop	$7.00
Jumbo	KitKat	$9.99

  
    
      
        
          Name
          Item Name
          Item Price
        
      
      
        
          Abubakar
          Eclair
          $0.87
        
        
          Blessing
          Jellybean
          $3.76
        
        
          Abasifreke
          Lollipop
          $7.00
        
        
          Jumbo
          KitKat
          $9.99

Centered tables

Add class="centered" to the table tag to center align all the text in the table.

Name	Item Name	Item Price
Abubakar	Eclair	$0.87
Blessing	Jellybean	$3.76
Abasifreke	Lollipop	$7.00
Jumbo	KitKat	$9.99

  
    
      
        
          Name
          Item Name
          Item Price
        
      
      
        
          Abubakar
          Eclair
          $0.87
        
        
          Blessing
          Jellybean
          $3.76
        
        
          Abasifreke
          Lollipop
          $7.00
        
        
          Jumbo
          KitKat
          $9.99

Right aligned tables

Add class="right" to the table tag to right align all the text in the table.

Name	Item Name	Item Price
Abubakar	Eclair	$0.87
Blessing	Jellybean	$3.76
Abasifreke	Lollipop	$7.00
Jumbo	KitKat	$9.99

  
    
      
        
          Name
          Item Name
          Item Price
        
      
      
        
          Abubakar
          Eclair
          $0.87
        
        
          Blessing
          Jellybean
          $3.76
        
        
          Abasifreke
          Lollipop
          $7.00
        
        
          Jumbo
          KitKat
          $9.99

Scrollable Tables

Put your table in a div with the class name of table-container to make a table horizontally scrollable.

1	2	3	4	5	6	7	8	9	10	11	12	13	14	15	16	17	18	19	20	21	22	23	24	25	26	27	28	29	30	31	32	33	34	35	36	37	38	39	40	41	42	43	44	45	46	47	48	49	50	51	52	53	54	55	56	57	58	59	60	61	62	63	64	65	66	67	68	69	70	71	72	73	74	75	76	77	78	79	80	81	82	83	84	85	86	87	88	89	90	91	92	93	94	95	96	97	98	99	100
2	4	6	8	10	12	14	16	18	20	22	24	26	28	30	32	34	36	38	40	42	44	46	48	50	52	54	56	58	60	62	64	66	68	70	72	74	76	78	80	82	84	86	88	90	92	94	96	98	100	102	104	106	108	110	112	114	116	118	120	122	124	126	128	130	132	134	136	138	140	142	144	146	148	150	152	154	156	158	160	162	164	166	168	170	172	174	176	178	180	182	184	186	188	190	192	194	196	198	200
3	6	9	12	15	18	21	24	27	30	33	36	39	42	45	48	51	54	57	60	63	66	69	72	75	78	81	84	87	90	93	96	99	102	105	108	111	114	117	120	123	126	129	132	135	138	141	144	147	150	153	156	159	162	165	168	171	174	177	180	183	186	189	192	195	198	201	204	207	210	213	216	219	222	225	228	231	234	237	240	243	246	249	252	255	258	261	264	267	270	273	276	279	282	285	288	291	294	297	300
4	8	12	16	20	24	28	32	36	40	44	48	52	56	60	64	68	72	76	80	84	88	92	96	100	104	108	112	116	120	124	128	132	136	140	144	148	152	156	160	164	168	172	176	180	184	188	192	196	200	204	208	212	216	220	224	228	232	236	240	244	248	252	256	260	264	268	272	276	280	284	288	292	296	300	304	308	312	316	320	324	328	332	336	340	344	348	352	356	360	364	368	372	376	380	384	388	392	396	400
5	10	15	20	25	30	35	40	45	50	55	60	65	70	75	80	85	90	95	100	105	110	115	120	125	130	135	140	145	150	155	160	165	170	175	180	185	190	195	200	205	210	215	220	225	230	235	240	245	250	255	260	265	270	275	280	285	290	295	300	305	310	315	320	325	330	335	340	345	350	355	360	365	370	375	380	385	390	395	400	405	410	415	420	425	430	435	440	445	450	455	460	465	470	475	480	485	490	495	500

Designed and built with ♥ by Rume Aluya.

1	2	3	4	5	6	7	8	9	10	11	12	13	14	15	16	17	18	19	20	21	22	23	24	25	26	27	28	29	30	31	32	33	34	35	36	37	38	39	40	41	42	43	44	45	46	47	48	49	50	51	52	53	54	55	56	57	58	59	60	61	62	63	64	65	66	67	68	69	70	71	72	73	74	75	76	77	78	79	80	81	82	83	84	85	86	87	88	89	90	91	92	93	94	95	96	97	98	99	100
2	4	6	8	10	12	14	16	18	20	22	24	26	28	30	32	34	36	38	40	42	44	46	48	50	52	54	56	58	60	62	64	66	68	70	72	74	76	78	80	82	84	86	88	90	92	94	96	98	100	102	104	106	108	110	112	114	116	118	120	122	124	126	128	130	132	134	136	138	140	142	144	146	148	150	152	154	156	158	160	162	164	166	168	170	172	174	176	178	180	182	184	186	188	190	192	194	196	198	200
3	6	9	12	15	18	21	24	27	30	33	36	39	42	45	48	51	54	57	60	63	66	69	72	75	78	81	84	87	90	93	96	99	102	105	108	111	114	117	120	123	126	129	132	135	138	141	144	147	150	153	156	159	162	165	168	171	174	177	180	183	186	189	192	195	198	201	204	207	210	213	216	219	222	225	228	231	234	237	240	243	246	249	252	255	258	261	264	267	270	273	276	279	282	285	288	291	294	297	300
4	8	12	16	20	24	28	32	36	40	44	48	52	56	60	64	68	72	76	80	84	88	92	96	100	104	108	112	116	120	124	128	132	136	140	144	148	152	156	160	164	168	172	176	180	184	188	192	196	200	204	208	212	216	220	224	228	232	236	240	244	248	252	256	260	264	268	272	276	280	284	288	292	296	300	304	308	312	316	320	324	328	332	336	340	344	348	352	356	360	364	368	372	376	380	384	388	392	396	400
5	10	15	20	25	30	35	40	45	50	55	60	65	70	75	80	85	90	95	100	105	110	115	120	125	130	135	140	145	150	155	160	165	170	175	180	185	190	195	200	205	210	215	220	225	230	235	240	245	250	255	260	265	270	275	280	285	290	295	300	305	310	315	320	325	330	335	340	345	350	355	360	365	370	375	380	385	390	395	400	405	410	415	420	425	430	435	440	445	450	455	460	465	470	475	480	485	490	495	500

1	2	3	4	5	6	7	8	9	10	11	12	13	14	15	16	17	18	19	20	21	22	23	24	25	26	27	28	29	30	31	32	33	34	35	36	37	38	39	40	41	42	43	44	45	46	47	48	49	50	51	52	53	54	55	56	57	58	59	60	61	62	63	64	65	66	67	68	69	70	71	72	73	74	75	76	77	78	79	80	81	82	83	84	85	86	87	88	89	90	91	92	93	94	95	96	97	98	99	100
2	4	6	8	10	12	14	16	18	20	22	24	26	28	30	32	34	36	38	40	42	44	46	48	50	52	54	56	58	60	62	64	66	68	70	72	74	76	78	80	82	84	86	88	90	92	94	96	98	100	102	104	106	108	110	112	114	116	118	120	122	124	126	128	130	132	134	136	138	140	142	144	146	148	150	152	154	156	158	160	162	164	166	168	170	172	174	176	178	180	182	184	186	188	190	192	194	196	198	200
3	6	9	12	15	18	21	24	27	30	33	36	39	42	45	48	51	54	57	60	63	66	69	72	75	78	81	84	87	90	93	96	99	102	105	108	111	114	117	120	123	126	129	132	135	138	141	144	147	150	153	156	159	162	165	168	171	174	177	180	183	186	189	192	195	198	201	204	207	210	213	216	219	222	225	228	231	234	237	240	243	246	249	252	255	258	261	264	267	270	273	276	279	282	285	288	291	294	297	300
4	8	12	16	20	24	28	32	36	40	44	48	52	56	60	64	68	72	76	80	84	88	92	96	100	104	108	112	116	120	124	128	132	136	140	144	148	152	156	160	164	168	172	176	180	184	188	192	196	200	204	208	212	216	220	224	228	232	236	240	244	248	252	256	260	264	268	272	276	280	284	288	292	296	300	304	308	312	316	320	324	328	332	336	340	344	348	352	356	360	364	368	372	376	380	384	388	392	396	400
5	10	15	20	25	30	35	40	45	50	55	60	65	70	75	80	85	90	95	100	105	110	115	120	125	130	135	140	145	150	155	160	165	170	175	180	185	190	195	200	205	210	215	220	225	230	235	240	245	250	255	260	265	270	275	280	285	290	295	300	305	310	315	320	325	330	335	340	345	350	355	360	365	370	375	380	385	390	395	400	405	410	415	420	425	430	435	440	445	450	455	460	465	470	475	480	485	490	495	500